Mobile-responsive layout audit for pal-e-docs-app

forgejo_admin commented

2026-05-06 00:10:38 +00:00

Contributor

Type

Feature

Lineage

Standalone -- discovered during SSO wiring session (2026-05-05). Phase 2.5: mobile access for SSO'd services.

Repo

ldraney/pal-e-app

User Story

As a platform admin on mobile,
I want pal-e-docs to be readable and navigable on my phone
So that I can reference SOPs and notes on the go.

Context

pal-e-docs-app is the SvelteKit frontend for pal-e-docs. Full control over CSS. Need to audit current mobile experience and fix responsive issues -- navigation sidebar, note content width, board views, search.

Must follow platform CSS philosophy from pal-e-playground:

Design tokens in :root (--color-*, --font-*)
Mobile-first: base styles for phone, @media (min-width: 600px) for desktop
No Tailwind, no frameworks
The phone is the product

File Targets

Files the agent should modify or create:

src/app.html -- verify viewport meta tag
src/app.css -- global responsive styles, design tokens
src/routes/+layout.svelte -- responsive sidebar/nav

Files the agent should NOT touch:

src/routes/+layout.server.ts -- server logic, not layout
src/routes/+layout.ts -- client logic, not layout

Acceptance Criteria

Note content readable on 390px viewport without horizontal scroll
Navigation sidebar collapses or converts to mobile nav pattern
Board views usable on mobile (cards stack, columns scroll horizontally)
Search works on mobile
Touch targets meet 44px minimum
Mobile-first CSS: base for phone, @media (min-width: 600px) for desktop

Test Expectations

npm run build succeeds
Manual: verify on 390px viewport in browser dev tools

Constraints

No Tailwind -- pure CSS custom properties + explicit styles
Mobile-first approach (min-width: 600px breakpoint)
Don't break existing desktop layout
Follow pal-e-playground design token system

Checklist

PR opened
Build passes
No unrelated changes

project-pal-e-platform -- platform project
#344 -- pal-e-docs-app dev environment (completed)

### Type Feature ### Lineage Standalone -- discovered during SSO wiring session (2026-05-05). Phase 2.5: mobile access for SSO'd services. ### Repo `ldraney/pal-e-app` ### User Story As a platform admin on mobile, I want pal-e-docs to be readable and navigable on my phone So that I can reference SOPs and notes on the go. ### Context pal-e-docs-app is the SvelteKit frontend for pal-e-docs. Full control over CSS. Need to audit current mobile experience and fix responsive issues -- navigation sidebar, note content width, board views, search. Must follow platform CSS philosophy from pal-e-playground: - Design tokens in `:root` (`--color-*`, `--font-*`) - Mobile-first: base styles for phone, `@media (min-width: 600px)` for desktop - No Tailwind, no frameworks - The phone is the product ### File Targets Files the agent should modify or create: - `src/app.html` -- verify viewport meta tag - `src/app.css` -- global responsive styles, design tokens - `src/routes/+layout.svelte` -- responsive sidebar/nav Files the agent should NOT touch: - `src/routes/+layout.server.ts` -- server logic, not layout - `src/routes/+layout.ts` -- client logic, not layout ### Acceptance Criteria - [ ] Note content readable on 390px viewport without horizontal scroll - [ ] Navigation sidebar collapses or converts to mobile nav pattern - [ ] Board views usable on mobile (cards stack, columns scroll horizontally) - [ ] Search works on mobile - [ ] Touch targets meet 44px minimum - [ ] Mobile-first CSS: base for phone, `@media (min-width: 600px)` for desktop ### Test Expectations - [ ] `npm run build` succeeds - [ ] Manual: verify on 390px viewport in browser dev tools ### Constraints - No Tailwind -- pure CSS custom properties + explicit styles - Mobile-first approach (`min-width: 600px` breakpoint) - Don't break existing desktop layout - Follow pal-e-playground design token system ### Checklist - [ ] PR opened - [ ] Build passes - [ ] No unrelated changes ### Related - `project-pal-e-platform` -- platform project - `#344` -- pal-e-docs-app dev environment (completed)