Speed up station guide startup

apps/web/style.css

@@ -224,6 +224,7 @@ button {
 }
 
 .stageGrid {
+  min-width: 0;
   min-height: 0;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(310px, 382px);
@@ -238,6 +239,7 @@ button {
 }
 
 .television {
+  min-width: 0;
   overflow: hidden;
   border-radius: 18px;
   background:
@@ -729,7 +731,7 @@ button {
 
 @media (max-width: 720px) {
   .watchSurface {
-    width: min(100% - 20px, 560px);
+    width: min(calc(100% - 20px), 560px);
     gap: 12px;
     padding-top: 10px;
   }
@@ -785,21 +787,86 @@ button {
 }
 
 @media (max-width: 440px) {
+  html,
+  body {
+    overflow-x: hidden;
+  }
+
   .watchSurface {
-    width: min(100% - 16px, 420px);
+    width: min(calc(100% - 16px), 420px);
+    max-width: calc(100% - 16px);
   }
 
   .topbar {
+    grid-template-columns: minmax(0, 1fr);
     padding: 8px;
   }
 
+  .topbar,
+  .stageGrid,
+  .playerStack,
+  .television,
+  .multiview,
+  .channelRail {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .brand {
+    max-width: 100%;
+  }
+
+  .brand span:last-child,
+  .quickTuneInput {
+    min-width: 0;
+  }
+
   .brand span:last-child {
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   .primaryButton {
+    width: 100%;
     min-width: 78px;
+    padding: 0 14px;
+  }
+
+  .roundButton {
+    display: none;
+  }
+
+  .quickTune {
+    grid-column: 1;
+    grid-row: auto;
+    width: 100%;
+  }
+
+  .toolRow,
+  .multiViewGrid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .toolButton {
+    width: 100%;
+  }
+
+  .liveTune {
+    grid-template-columns: 48px minmax(0, 1fr);
+  }
+
+  .liveTune::before {
+    width: 48px;
+    height: 48px;
+  }
+
+  .watchBadge {
+    padding: 0 10px;
+  }
+
+  .roundButton {
+    width: 42px;
+    height: 42px;
   }
 
   .channelRail {