style: make dashboard layout responsive for mobile devices

client/src/index.css

@@ -1084,3 +1084,76 @@ body {
   animation: spin 1s linear infinite;
 }
 
+/* ==========================================================================
+   Mobile Responsiveness
+   ========================================================================== */
+@media (max-width: 768px) {
+  /* Header */
+  .app-header {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 1rem;
+    gap: 1rem;
+  }
+  
+  .brand-section {
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  
+  .header-stream-selector {
+    margin-left: 0;
+    margin-top: 0.75rem;
+    width: 100%;
+  }
+  
+  .select-input--compact {
+    max-width: 100%;
+    width: 100%;
+  }
+  
+  /* Controls and Navigation */
+  .header-controls {
+    flex-direction: column-reverse;
+    align-items: stretch;
+    gap: 1rem;
+  }
+  
+  .user-profile {
+    justify-content: space-between;
+  }
+  
+  /* Swipe-navigation (tabs) */
+  .nav-tabs {
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+    justify-content: flex-start;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none; /* Firefox */
+  }
+  
+  .nav-tabs::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
+  }
+  
+  /* Dashboard Content Padding */
+  .dashboard-content {
+    padding: 1rem 0.5rem;
+  }
+  
+  .panel {
+    padding: 1rem;
+  }
+  
+  .panel-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .panel-controls, .search-container {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+