diff --git a/public/styles.css b/public/styles.css index d7cf09d..fd43397 100644 --- a/public/styles.css +++ b/public/styles.css @@ -2610,27 +2610,53 @@ p { /* Responsive design for overlay */ @media (max-width: 768px) { - .member-overlay-content { - width: 95%; - max-width: none; - margin: 20px; - } - - .member-overlay-header { - padding: 20px 20px 12px; - } - - .member-overlay-body { - padding: 20px; - } - - .member-overlay-actions { - flex-direction: column; - } - - .member-overlay-title h3 { - font-size: 1.3rem; - } + .member-overlay-content { + width: 95%; + max-width: none; + margin: 20px; + } + + .member-overlay-header { + padding: 20px 20px 12px; + } + + .member-overlay-body { + padding: 20px; + } + + .member-overlay-actions { + flex-direction: column; + } + + .member-overlay-title h3 { + font-size: 1.3rem; + } +} + +/* Compact mobile layout for overlay */ +@media (max-width: 480px) { + .member-overlay-content { + width: calc(100% - 16px); + margin: 8px; + border-radius: 12px; + } + + .member-overlay-header { + padding: 12px 14px 8px; + } + + .member-overlay-body { + padding: 0px; + max-height: calc(90vh - 80px); + } + + .member-overlay-body .member-card .member-header { + padding: 12px 12px 0; + } + + .member-overlay-body .member-card .member-details { + padding: 0 12px; + } } /* Test page styles */ @@ -2685,4 +2711,83 @@ p { .no-data div { color: rgba(255, 255, 255, 0.5); text-align: center; +} + +/* Responsive design for progress and results */ +@media (max-width: 768px) { + .progress-info, + .results-summary { + flex-direction: column; + gap: 0.5rem; + } + + .progress-info span, + .results-summary span { + text-align: center; + } + + .overall-progress { + flex-direction: column; + gap: 0.75rem; + } + + .progress-text { + text-align: center; + min-width: auto; + } + + .results-actions { + flex-direction: column; + gap: 0.75rem; + } + + .clear-btn, + .refresh-btn { + width: 100%; + justify-content: center; + } +} + +/* Mobile-responsive cluster header toolbar */ +@media (max-width: 480px) { + .cluster-header { + flex-direction: column; + align-items: stretch; + gap: 0.75rem; + padding: 0.75rem 0.5rem; + } + + .cluster-header-left { + display: flex; + justify-content: center; + } + + .primary-node-info { + flex-direction: row; + align-items: center; + gap: 0.5rem; + padding: 0.75rem; + text-align: center; + } + + .primary-node-label { + font-size: 0.95rem; + } + + .primary-node-ip { + font-size: 0.95rem; + padding: 0.4rem 0.6rem; + } + + .primary-node-refresh { + padding: 0.4rem; + margin-top: 0; + } + + .refresh-btn { + width: 100%; + justify-content: center; + padding: 0.75rem; + font-size: 0.95rem; + } } \ No newline at end of file