style(mobile): reduce horizontal padding and tighten spacing to maximize usable width on small screens

public/styles/main.css

@@ -3282,4 +3282,45 @@ html {
     -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
     scrollbar-width: thin;  /* Thin scrollbar on Firefox */
     scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);  /* Firefox scrollbar colors */
+}
+
+/* Mobile width optimization: maximize horizontal space */
+@media (max-width: 768px) {
+	body {
+		padding: 0.5rem;
+	}
+	.container {
+		padding: 0 0.5rem;
+		max-height: calc(100vh - 1rem);
+	}
+	.cluster-section,
+	.firmware-section {
+		padding: 0.5rem;
+	}
+	.main-navigation {
+		padding: 0.25rem;
+	}
+	.nav-tab {
+		padding: 0.6rem 0.8rem;
+	}
+	.members-grid {
+		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+		gap: 0.5rem;
+	}
+}
+
+@media (max-width: 480px) {
+	body {
+		padding: 0.25rem;
+	}
+	.container {
+		padding: 0 0.25rem;
+		max-height: calc(100vh - 0.5rem);
+	}
+	.member-card {
+		padding: 0.75rem;
+	}
+	.main-navigation {
+		padding: 0.25rem;
+	}
 }