fix: improve mobile layout

public/styles.css

@@ -2610,27 +2610,53 @@ p {
 
 /* Responsive design for overlay */
 @media (max-width: 768px) {
-    .member-overlay-content {
+	.member-overlay-content {
-        width: 95%;
+		width: 95%;
-        max-width: none;
+		max-width: none;
-        margin: 20px;
+		margin: 20px;
-    }
+	}
 	
-    .member-overlay-header {
+	.member-overlay-header {
-        padding: 20px 20px 12px;
+		padding: 20px 20px 12px;
-    }
+	}
 	
-    .member-overlay-body {
+	.member-overlay-body {
-        padding: 20px;
+		padding: 20px;
-    }
+	}
 	
-    .member-overlay-actions {
+	.member-overlay-actions {
-        flex-direction: column;
+		flex-direction: column;
-    }
+	}
 	
-    .member-overlay-title h3 {
+	.member-overlay-title h3 {
-        font-size: 1.3rem;
+		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 */
@@ -2686,3 +2712,82 @@ p {
     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;
+	}
+}