Fix mobile horizontal scroll from overflowing channel nav

Channel pill row outgrew the viewport once more channels were added,
pushing the whole page sideways. Let the header wrap, scroll the nav
inside its own pill, and clip body overflow as a safety net.

internal/web/static/css/input.css

@@ -44,6 +44,20 @@ html[data-phase="night"] {
 @layer base {
   body { font-family: "Nunito", system-ui, sans-serif; }
   html { scroll-behavior: smooth; }
+  /* Belt-and-braces: never let stray wide content push horizontal scroll on
+     the whole page (the channel nav scrolls inside itself instead). */
+  html, body { overflow-x: hidden; }
+}
+
+@layer components {
+  /* Channel pill row may exceed viewport on mobile once enough channels are
+     configured. Let it scroll inside its own rounded container and hide the
+     scrollbar chrome so it still reads as a clean pill. */
+  .pete-channel-nav {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .pete-channel-nav::-webkit-scrollbar { display: none; }
 }
 
 @layer utilities {