Pulse Site — Mobile-First Responsive Redesign Plan

Owner: Nova (Design & Creative) Stack: Nuxt 3 (v4.4.8) · Vue 3 · Tailwind CSS v4 · @tailwindcss/viteSite root: ~/pulse-site (Nuxt dev on :3000) Scope: All primary pages — Dashboard (/), Market Watch (/watch), Watchlist, Research (/research, /research/[slug]), Podcast, Chat (/chat), Account, Stock detail (/stock/[ticker], /quote/[ticker]), News, Heatmap.

1. Current-State Assessment

What already works well ✅

• Global scaffold is responsive: main uses max-w-[1600px] px-4 sm:px-6, gutters scale properly.
• Most 2-col layouts already use lg:grid-cols-[1fr_320px] / lg:grid-cols-[260px_1fr] — collapse to single col on mobile ✅.
• SearchBox has a responsive width (w-28 … sm:w-36 focus:w-44).
• Data table elements are wrapped in overflow-x-auto containers (Dashboard brief, Account portfolio, watchlist) — safe from horizontal blowout ✅.
• Tab bars use overflow-x-auto with shrink-0 (Dashboard trends tabs) — scrollable on narrow screens ✅.
• Chat bubbles max-w-[88%] sm:max-w-[75%] — thumb-friendly ✅.
• Charts isolated in <ClientOnly> with explicit height.
• Existing *.vue fixtures already use sm: / lg: prefixes on 12 of 16 files.

Friction points — the real work 🚨

A. Header — no mobile navigation (CRITICAL, affects ALL pages)components/AppHeader.vue renders logo + 4 nav links + divider + search + date chip + account button in one row. There is no hamburger / collapsible nav. On a 360–390px phone this overflows and clips the account CTA / nav — the highest-traffic breakage.

B. Stock detail grids not responsive (pages/stock/[ticker].vue)

• Loading shimmer: grid grid-cols-3 at line 13 — never collapses → 3 columns squeezed into phone width, chips crush.
• MA50 status: grid grid-cols-2 gap-3 (line 79) — acceptable on mobile but tight; should become grid-cols-1 sm:grid-cols-2.

C. Chat page height collapse (pages/chat.vue)

• Root is flex h-full flex-col but app.vue main has no defined height / min-height. On mobile the chat panel can collapse to near-zero height — the input + history can't scroll properly. Needs a min-h + 100dvh fuel for the flex chain.

D. Viewport / overscroll niceties missing

• nuxt.config.ts viewport meta is present (width=device-width, initial-scale=1) but no viewport-fit=cover → iPhone notch inset issues in landscape.
• No overscroll-behavior, no safe-area padding for iOS bottom bars (affects sticky header + chat input).

E. Touch targets below 44px

• Header account button px-3 py-1.5 text-xs (~28px tall) — below Apple's 44px guideline.
• Podcast audio <audio> controls are native and tiny.
• Some suggestion/table rows have insufficient hit area.

F. Table density on mobile

• Daily Brief portfolio table is fine (wrapped), but research/brief tables should get a mobile "stacked card" fallback for >3 columns rather than forcing horizontal scroll on the primary reading surface.

G. Empty/edge states

• Index and account use overflow-x-auto correctly, but research.vue grid and podcast episode list should be verified for card stretching only in lg.

2. Design Token Alignment

Tokens already defined in assets/css/main.css @theme. No palette change — keep the dark neon-green system. Add responsive-safe utilities:

--color-surface: #09090b      (page)
--color-card: #101014          (panels)
--color-card2: #16161c
--color-brand-500: #39FF14     (accent)
--color-foreground: #e4e4e7

Mobile-first default rule: every grid-cols-* must be grid-cols-1 (or a safe small count) at the base, escalating with sm:/md:/lg:. Never grid-cols-3 at base.

Contrast / a11y: keep text-brand-400 on bg-card (contrast ≥ 4.5:1), enlarge touch targets to ≥44px. Tabular numerals (tabular-nums) already applied to all price figures.

3. Micro-Interaction & Telemetry Loop

• Sticky header: add a subtle backdrop-blur + bottom hairline that appears after 4px scroll (bg-surface/85), and on mobile swap to a two-row compact header with a hamburger that reveals a full-height slide-in drawer (respecting 100dvh).
• Mobile nav drawer: slide-in from the right, overscroll-behavior-contain, close on route change / backdrop tap / Esc. Current nav item gets a neon left indicator.
• Chat input: sticky composer pinned above iOS home indicator using env(safe-area-inset-bottom) padding; send button ring glows when typing.
• Loading telemetry: existing .shimmer utilities reused; ensure skeleton grids collapse correctly per breakpoint so users see a true mobile skeleton, not a desktop crushed one.

4. Implementation Checklist (by page)

Global

1. components/AppHeader.vue — rewrite nav:
   • lg: show inline nav links (as-is).
   • below lg: render hamburger button (≥44px target); add drawer <nav> with all 4 tabs + search + account CTA.
   • Keep sticky + backdrop.
2. app.vue — add min-h-[100dvh], set viewport viewport-fit=cover in nuxt.config.ts, add safe-area bottom padding to footer, overscroll-behavior-y: none on body.
3. components/SearchBox.vue — widen base to w-32, ensure it sits inside drawer on mobile (not inline flex).
4. Add global min-h-[44px] for interactive controls; rounded-* cleanup already globally square per Young fixture.

Dashboard / (index.vue)

• Verify podcast row: on mobile the audio max-w-[240px] should become w-full stacked (currently flex-wrap handles it — good), tighten gap-y.
• Trends tab bar works (scrollable). Confirm tab content tables use overflow-x-auto (Daily Brief already does).
• Confirm neon left-border section pattern from pulse-tv-home-design.md if that rev lands. This task is responsiveness not re-theme — flag for Sol whether TV rev ships in parallel.

Stock /stock/[ticker] + /quote/[ticker]

• Line 13: loading shimmer grid grid-cols-3 gap-3 → grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3.
• Line 79: grid grid-cols-2 gap-3 → grid grid-cols-1 gap-3 sm:grid-cols-2.
• Chart height 400 → accept 100%/responsive: use :height bound to viewport with <ClientOnly> (e.g. min(400, 55dvh)).

Research /research + /research/[slug]

• /research card grid: ensure base is 1-col (grid-cols-1 md:grid-cols-2 lg:grid-cols-3), check current base (audit flagged).
• /research/[slug] — already max-w-2xl article column (good reading measure on mobile). Keep.

Podcast /podcast

• Episode <audio> widths w-44 sm:w-64 and max-w-xs sm:w-72 — make mobile w-full stacked under the meta row.

Chat /chat

• Fix height collapse: give the outer chat card h-[calc(100dvh-...)] or the main a min-h-[100dvh] flex chain so the composer + history scroll cleanly on mobile.
• Composer: pb-[env(safe-area-inset-bottom)]; textarea min-h-[44px].
• Ensure bubbles wrap (already max-w-[88%]) — keep.

Account /account

• Verified lg:grid-cols-[260px_1fr] ✅. On mobile, convert the sidebar to a horizontal scrollable tab strip (overflow-x-auto flex) instead of a vertical card — better thumb access.
• Portfolio table already wrapped in overflow-x-auto ✅.

Market Watch / Watchlist / News / Heatmap

• watch.vue + watchlist.vue grids already use responsive sm:/md:/lg: counts ✅.
• news.vue — verify list items use flex-wrap for source badges; confirm no fixed widths.

5. Testing Matrix

Validation tools: Chrome DevTools device toolbar (iPhone 12/14, Pixel 7, Galaxy Fold), nuxt build + Lighthouse mobile run for CLS/tap-target scores, Playwright viewport sweep.

6. Execution Plan

Design handoff: Nova provides final specs + this checklist; Ace implements in ~/pulse-site, verifies against testing matrix, reports evidence (screenshots at breakpoints). Sol flags if the TV-home re-theme ships in parallel to avoid conflicting grid overrides.

Prepared by Nova · SolOS Design & Creative
Based on audit of current ~/pulse-site at commit state 2026-08-19.