fix(frontend): mobile layout polish + overflow handling (0.60.1)

Visual cleanup pass after wiring up real data — the placeholder
content used during the five mobile phases hid a few sharp edges
that became obvious as soon as user-supplied tags / author handles
/ descriptions hit the screen.

- Mobile gutter unified at 16px (was 12px) — matches iOS / Material
  standard and gives chips, description text, and chapter rows
  visible breathing room from the screen edge. Hero negative margin
  in /manga/[id] tracks the change so the bleed still hits viewport.
- Catalog grid switched from 2 columns to 4 with
  `repeat(4, minmax(0, 1fr))` (per user preference). The `minmax(0,
  ...)` is load-bearing — without it the implicit `minmax(auto, 1fr)`
  lets a long single-word card title push the column past the
  viewport edge. MangaCard's `.author` and `.genres` lines hide
  below 640px so every card in the 4-col layout has identical height
  (cover + 2-line title clamp).
- Same minmax(0, 1fr) trick applied to the detail page's
  `.overview` grid track, plus defensive `min-width: 0` /
  `max-width: 100%` on `.meta` and `.chip-row` so a long
  unbreakable tag or romanized URL can't drag the metadata column
  past the article gutter.
- BottomNav swapped from `grid-auto-columns` (= `minmax(auto, 1fr)`)
  to an explicit `repeat(4, minmax(0, 1fr))`, plus `min-width: 0` on
  `.tab` and an ellipsizing `.label` so a long tab label stays
  inside the bar. The Browse placeholder is replaced with Upload —
  a real action, no longer a no-op duplicate of Home.
- Hero appbar gets 16px all-around inset (was 8px) so the back / ⋯
  circle buttons aren't kissing the screen edge or the hero top.
  Hero content gets 20px horizontal padding so the cover thumb +
  title sit visibly off the hero scrim. Description gains
  `overflow-wrap: anywhere` for long URLs / romanized titles.
- Chip now allows `overflow-wrap: anywhere` on its label and uses
  `max-width: 100%` + `min-width: 0` so a long token wraps to its
  own line within the chip-row and ellipsizes inside the chip.
- Mobile catalog search-row gains `flex-basis: calc(100% - 36px -
  --space-2)` so the search input takes its own line — the Filter
  and Sort chips wrap to a second row instead of squeezing the
  input down to a few characters.
- Global safety net: `html, body { overflow-x: hidden }` below
  640px so any future bug that lets an element overflow the
  viewport doesn't expose touch-pan that shifts the whole layout.
  Fixed descendants (bottom nav, CTA bar) are unaffected.
- audit.mjs — small dev helper that walks all 12 user-facing
  routes at 390px and reports horizontal overflow, internal
  scrollers, and edge-bleeding controls. Used to drive these fixes
  and useful for future mobile changes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/routes/manga/[id]/+page.svelte

@@ -754,6 +754,10 @@
         white-space: pre-wrap;
         color: var(--text);
         margin: var(--space-3) 0;
+        /* Long URLs / romanized titles in the description shouldn't
+           push the article past the screen — `anywhere` breaks them
+           before they overflow. */
+        overflow-wrap: anywhere;
     }
 
     .tag-row {
@@ -947,10 +951,23 @@
     }
 
     @media (max-width: 640px) {
+        /* article gets explicit horizontal clip so the hero's
+           negative margins (which bleed edge-to-edge by extending
+           past main's `--space-3` gutters) don't show up as touch-
+           pannable internal scroll. Fixed-position descendants like
+           .cta-bar escape this clip so the sticky CTA still spans
+           the full viewport. */
+        article {
+            overflow-x: hidden;
+        }
+
         .mobile-hero {
             position: relative;
             display: block;
-            margin: 0 calc(-1 * var(--space-3)) var(--space-4);
+            /* Negative margin cancels main's 16px mobile gutter so the
+               blurred backdrop runs edge-to-edge — keep this number in
+               sync with main's padding-left/right in +layout.svelte. */
+            margin: 0 calc(-1 * var(--space-4)) var(--space-4);
             overflow: hidden;
             color: #fff;
             min-height: 220px;
@@ -983,8 +1000,12 @@
             display: flex;
             align-items: center;
             gap: var(--space-1);
-            padding: var(--space-2) var(--space-2);
-            padding-top: calc(var(--space-2) + var(--safe-top));
+            /* 16px horizontal gutter + 16px above the buttons so they
+               aren't kissing the screen top or hero edges. iOS / Material
+               both ship app-bar buttons with ~16dp inset; tighter than
+               that reads as "stuck to the border". */
+            padding: var(--space-4) var(--space-4);
+            padding-top: calc(var(--space-4) + var(--safe-top));
             min-height: 48px;
         }
 
@@ -1016,7 +1037,10 @@
             z-index: 1;
             display: flex;
             gap: var(--space-3);
-            padding: var(--space-3) var(--space-3) var(--space-4);
+            /* 20px side padding gives the cover thumb + title visible
+               separation from the hero's edge (vs. main's 16px gutter,
+               which on a tinted hero reads as flush). */
+            padding: var(--space-3) var(--space-5) var(--space-5);
         }
 
         .hero-cover {
@@ -1049,6 +1073,7 @@
             line-clamp: 2;
             -webkit-box-orient: vertical;
             overflow: hidden;
+            overflow-wrap: anywhere;
         }
 
         .hero-authors {
@@ -1089,10 +1114,29 @@
         }
 
         .overview {
-            grid-template-columns: 1fr;
+            /* `1fr` resolves to `minmax(auto, 1fr)` and the `auto`
+               minimum is the intrinsic content size — a single long
+               unbroken tag or URL in .meta then pushes the whole
+               column past the article's gutter. `minmax(0, 1fr)`
+               clamps it so the grid item respects parent width and
+               its children's `overflow-wrap: anywhere` actually
+               takes effect. */
+            grid-template-columns: minmax(0, 1fr);
             margin-bottom: var(--space-4);
         }
 
+        .overview .meta {
+            /* Defensive — every flex/grid container down this tree
+               needs a min-width:0 escape so unbreakable tokens can't
+               re-expand. */
+            min-width: 0;
+        }
+
+        .overview .chip-row {
+            min-width: 0;
+            max-width: 100%;
+        }
+
         /* Inline action-row is replaced by the AppBar bookmark icon +
            overflow sheet on mobile; the inline Continue link is
            replaced by the sticky bottom CTA. */
@@ -1155,8 +1199,13 @@
             color: var(--primary-contrast);
             border-radius: var(--radius-md);
             text-decoration: none;
+            text-align: center;
             font-weight: var(--weight-semibold);
             box-shadow: var(--shadow-md);
+            /* "Continue {chapterLabel}" can carry an unbroken slug like
+               a hash or romanized title; `anywhere` keeps the button
+               from pushing past the .cta-bar's padded gutter. */
+            overflow-wrap: anywhere;
         }
 
         .cta:hover {