Mobile polish for the community browser, cards, and preview pane

Adam: "Take a pass at the site and improve the overall mobile
look. Focus on the template browser and the cards and the design
previews."

Mobile-before screenshots (iPhone-14 viewport) showed three real
problems:

  1. Modal-tabs row overflowed the screen edge — Search and My
     Designs cut off; users couldn't reach them.
  2. Type-filter chips + category + language + trust selects all
     wrapped to 3-4 rows, eating ~150px of vertical space before
     a single card showed.
  3. Preview-pane header layout squeezed the title into a tall
     narrow column on the left because the action row insisted on
     filling the right.

All of these stay desktop-first; the editor itself isn't optimised
for phones (Adam: "I don't expect users to use mobile to create
designs as much as just viewing what's been created"). The new
@media (max-width: 600px) block tightens only the community-
browsing surfaces:

Modal sizing
  - Cards / inner content now use min(98vw, 640px) — 2vh margins
    instead of 4vh, so the modal uses the screen rather than
    floating in dead space.
  - Padding reduced. Close button moves a few px tighter to the
    corner.
  - #nostrModal .modalHeader switches to flex-direction:column so
    the title sits on its own row above the actions. Fixes the
    "title squished into a narrow column" symptom.

Horizontal scroll instead of wrap
  - .modalTabs and .feedTypeFilter both go flex-wrap:nowrap with
    overflow-x:auto. Users swipe through the tabs / chips
    horizontally, which is the standard mobile gesture for crowded
    nav. Thin custom scrollbar tracks.

Cards
  - One column. Tighter gaps (10px).
  - Thumbs cap at height:260px / max-height:60vw — without this,
    a 360px-wide phone gives a 360px-tall square thumb that fills
    the entire viewport with one card.
  - Card-actions row gets smaller font + tighter padding so the
    four buttons (▲ Preview Use/Fork ⋯) stay on one row at common
    titles.

Preview pane
  - Tighter padding inside the gradient stroke (10px instead of
    14px) so the preview content has more room.
  - Ribbon slightly smaller font on mobile to match the new
    proportions.

Verified visually at 390x844 (iPhone-14): tabs scroll cleanly,
chips scroll cleanly, the Premium card fills the column with its
watermarked JPEG + corner ribbon + Unlock CTA in the right
proportions, and the preview pane stacks title-above-actions
without crushing either. Regression smoke (existing editor) still
passes at desktop widths.

Co-Authored-By: Claude Opus 4.7 <[email protected]>

src/index.html

@@ -2518,6 +2518,53 @@
       .previewShell { min-height: 420px; }
     }
 
+    /* Mobile polish (PASS: template browser, cards, design previews).
+       The editor itself is desktop-first; this pass targets the
+       community-browsing surfaces a phone user is most likely to hit. */
+    @media (max-width: 600px) {
+      /* Modal sizing — use the screen, don't waste edges */
+      .modalCard { padding:12px; width:min(98vw,640px); max-height:94vh; margin:2vh auto; }
+      #nostrModal .modalCard { padding:12px 44px 12px 12px; }
+      .modalInner { padding:14px; width:96vw; max-height:94vh; margin:2vh auto; box-sizing:border-box; }
+      .welcomeCloseBtn { top:6px; right:6px; }
+      #nostrClose { top:6px; right:6px; }
+
+      /* Modal header: stack title above actions on narrow screens so the
+         actions row doesn't squeeze the title into a tall column. */
+      #nostrModal .modalHeader { flex-direction:column; align-items:stretch; gap:8px; padding-right:32px; }
+      .previewActionsRow { justify-content:flex-start; gap:4px; }
+      .previewActionsRow button { font-size:.74rem; padding:4px 9px; }
+
+      /* Tab row → horizontal scroll. Avoids wrapping to 2-3 rows of tabs. */
+      .modalTabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:4px; padding-bottom:6px; margin-bottom:8px; scrollbar-width:thin; }
+      .modalTabs::-webkit-scrollbar { height:4px; }
+      .modalTab { padding:5px 12px; font-size:.8rem; flex:0 0 auto; white-space:nowrap; }
+
+      /* Type filter chips → horizontal scroll; selects on a second row */
+      .feedTypeFilter { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:4px; padding-bottom:4px; margin-bottom:6px; scrollbar-width:thin; }
+      .feedTypeFilter::-webkit-scrollbar { height:4px; }
+      .feedTypeBtn { padding:3px 10px; font-size:.72rem; flex:0 0 auto; white-space:nowrap; }
+      .feedCategorySelect { flex:0 0 auto; min-width:130px; }
+      .feedTrustToggle { font-size:.72rem; flex:0 0 auto; }
+
+      /* Card grid: single column on phones (auto-fill at 240px goes to 1
+         col anyway, but this is explicit) and tighter gaps. */
+      .feedWall { grid-template-columns:1fr; gap:10px; }
+      /* Thumb gets a max height — keeps "empty" cards from being 360px+
+         tall just because they're square. Real previews fit inside. */
+      .feedCardThumb { aspect-ratio:auto; height:260px; max-height:60vw; }
+      .feedCardActions { gap:4px; padding:6px 7px; }
+      .feedCardActions button { font-size:.72rem; padding:3px 9px; }
+      .feedCardZapBadge { font-size:.66rem; padding:1px 6px; }
+      .feedCardTitle { font-size:.86rem; }
+      .feedCardSub { font-size:.72rem; }
+
+      /* Preview pane: tighter padding so the gradient ring doesn't eat
+         all the available preview area. */
+      #nostrPreviewPanel.premiumPreviewPane { padding:10px; border-radius:8px; }
+      .premiumPreviewRibbon { top:6px; left:6px; font-size:.62rem; padding:2px 7px; }
+    }
+
     body.exporting .slot,
     body.exporting .discSlot,
     body.exporting .jewelSlot {