Mobile UX: fixed bottom nav, compact header, less cramped cards

- App-shell layout (height:100dvh, only main scrolls) so the bottom nav
  is a natural flex child and never disappears regardless of browser
  chrome show/hide behaviour
- Bottom nav reduced from h-16 to h-14, icons from 20px to 18px, labels
  from 10px to 9px — slimmer bar, still readable
- Header: min-w-0 on search prevents horizontal overflow; user/sign-out
  hidden on mobile (accessible via Settings); logo shortened to "YT" on
  mobile; px-3 / h-12 on mobile instead of px-4 / h-14
- Grid card descriptions hidden on mobile (hidden sm:block) — reduces
  height cramping in the 2-column feed
- scrollToTop() utility replaces window.scrollTo so pagination still
  scrolls to top within the new scroll container

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/utils/scroll.js

@@ -0,0 +1,5 @@
+export function scrollToTop(behavior = "smooth") {
+  const main = document.querySelector("main[data-scroll]");
+  if (main) main.scrollTo({ top: 0, behavior });
+  else window.scrollTo({ top: 0, behavior });
+}