From 1c3160ca7487939a008df01aeb47a2d6568bb278 Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Fri, 29 May 2026 10:14:30 -0400 Subject: [PATCH] Mobile polish for the community browser, cards, and preview pane MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/index.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/src/index.html b/src/index.html index 0ce7d05..6c1da66 100644 --- a/src/index.html +++ b/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 {