feat(webapp): [mobile] round 2 — all categories >=8, polish the five low findings

Designer round 2: layout 9 / readability 8 / tap-targets 8 /
navigation 9 / polish 8, zero high or medium findings; every round-1
fix confirmed with measurements (no page-level horizontal scroll on any
of the 24 surface x viewport combinations; desktop 1360 unaffected by
the 900px breakpoint).

Remaining low cosmetics fixed for the confirmation round:
- .hsize never wraps ('67 B' split across lines at 360)
- guide Copy button is a real 44px touch target (code blocks get the
  height to hold it), admin selects/buttons 40 -> 44px
- truncated emails/URLs wrap on touch instead of dead-end ellipsis
- history timestamps 12px (11px was borderline on small phones)

42 e2e specs green.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01P5cxPQdSGJnjXCYY9GeWXt

docs/mobile-quality-prd.md

@@ -80,6 +80,7 @@ spot-checked each round — no regressions introduced by mobile fixes.
 | Round | layout | readability | tap-targets | navigation | polish | high-sev findings |
 |---|---|---|---|---|---|---|
 | 1 (before fixes) | 5 | 7 | 6 | 8 | 7 | 1 (topbar overflow at 768/844 — breakpoint gap) |
+| 2 (after round-1 fixes) | 9 | 8 | 8 | 9 | 8 | 0 (5 low cosmetics, fixed before round 3) |
 
 ## Won't-fix / disputed
 

internal/webapp/frontend/src/style.css

@@ -361,7 +361,7 @@ button, input, a.btn { font-family: inherit; }
 .htime { margin-left: auto; color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
 .hmeta { display: flex; gap: 14px; margin-top: 4px; padding-left: 23px; font-size: 12px; color: var(--text-dim); }
 .hdev, .hsize { color: var(--text-faint); }
-.hsize { font-variant-numeric: tabular-nums; }
+.hsize { font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
 .hnote { margin-top: 4px; padding-left: 23px; font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
 .hnote:hover { color: var(--text); }
 .hnote.open { white-space: normal; overflow-wrap: anywhere; }
@@ -440,8 +440,14 @@ button, input, a.btn { font-family: inherit; }
   /* Admin rows: 27-28px selects/buttons are too small to tap; let rows
      wrap so the controls keep room next to long names/URLs. */
   .admin-item { flex-wrap: wrap; row-gap: 8px; padding: 12px 14px; }
-  .admin-item select { height: 40px; }
-  .ai-btn, .ai-del { height: auto; min-height: 40px; padding: 0 12px; }
+  .admin-item select { height: 44px; }
+  .ai-btn, .ai-del { height: auto; min-height: 44px; padding: 0 12px; }
+  /* No hover on touch: a truncated email/URL would be unreadable — wrap it. */
+  .ai-main { white-space: normal; overflow-wrap: anywhere; }
+  /* The code-block Copy button needs a real touch target; give one-line
+     blocks the height to hold it. */
+  .gd-code { min-height: 62px; padding-top: 12px; padding-bottom: 12px; }
+  .gd-copy { min-height: 44px; padding: 0 14px; }
   .modal-actions button { height: auto; min-height: 44px; }
   .pbtn { height: auto; min-height: 44px; }
   #palette-results li { height: auto; min-height: 44px; }
@@ -457,7 +463,7 @@ button, input, a.btn { font-family: inherit; }
      conveys activity) instead of truncating "readme.md" to "readme...." */
   .dl-meta { display: none; }
   .ai-tag { font-size: 11px; }
-  .htime { white-space: nowrap; font-size: 11px; }
+  .htime { white-space: nowrap; font-size: 12px; }
   .hline { flex-wrap: wrap; }
 }
 

internal/webapp/static/index.html

@@ -5,8 +5,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>BearDrive</title>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#128059;</text></svg>">
-  <script type="module" crossorigin src="/assets/index-CStGHFCC.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-D7GJpYAS.css">
+  <script type="module" crossorigin src="/assets/index-JZwHsgP-.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-CUfUUJ6H.css">
 </head>
 <body>
 <svg width="0" height="0" class="sprite" aria-hidden="true" focusable="false">