pal-e-admin: Mobile-responsive layout

### 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-admin` (local, not yet on Forgejo -- ticket filed here until repo is created) ### User Story As a platform admin on mobile, I want the pal-e-admin dashboard to be fully responsive So that I can manage platform services from my phone. ### Context pal-e-admin is a brand new SvelteKit app with Keycloak OIDC auth. Scaffolded with minimal CSS -- right time to make layout mobile-first before features accumulate. Full control over all CSS. Must follow platform CSS philosophy from pal-e-playground: - Design tokens in `:root` (`--color-bg`, `--color-surface`, `--color-text`, `--color-muted`, `--color-accent`, `--color-border`, `--font-body`, `--font-mono`) - Atkinson Hyperlegible for body text, system monospace for code - Mobile-first: base styles for phone, `@media (min-width: 600px)` for desktop - One CSS file, 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/routes/+layout.svelte` -- responsive layout with mobile nav, design tokens in `:root` - `src/routes/+page.svelte` -- responsive dashboard cards/panels Files the agent should NOT touch: - `src/auth.ts` -- auth logic, not layout - `src/hooks.server.ts` -- server hooks, not layout ### Acceptance Criteria - [ ] Design tokens from pal-e-playground in `:root` (all `--color-*`, `--font-*` vars) - [ ] Atkinson Hyperlegible loaded for body text - [ ] Viewport meta tag set correctly in app.html - [ ] Navigation works on 390px viewport (hamburger or bottom nav) - [ ] Dashboard cards/panels stack vertically on mobile, grid on desktop at 600px - [ ] Touch targets meet 44px minimum - [ ] Service links (Grafana, Harbor, MinIO, Forgejo) accessible on mobile - [ ] No horizontal scroll on any page ### 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, not `max-width`) - Design tokens from pal-e-playground `:root` system - One CSS scope per component, tokens in layout ### Checklist - [ ] PR opened - [ ] Build passes - [ ] No unrelated changes ### Related - `project-pal-e-platform` -- platform project - `#340` -- pal-e-admin scaffold (completed) - `#342` -- CSS unified platform theme

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-admin (local, not yet on Forgejo -- ticket filed here until repo is created)

User Story

As a platform admin on mobile,
I want the pal-e-admin dashboard to be fully responsive
So that I can manage platform services from my phone.

Context

pal-e-admin is a brand new SvelteKit app with Keycloak OIDC auth. Scaffolded with minimal CSS -- right time to make layout mobile-first before features accumulate. Full control over all CSS.

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

Design tokens in :root (--color-bg, --color-surface, --color-text, --color-muted, --color-accent, --color-border, --font-body, --font-mono)
Atkinson Hyperlegible for body text, system monospace for code
Mobile-first: base styles for phone, @media (min-width: 600px) for desktop
One CSS file, 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/routes/+layout.svelte -- responsive layout with mobile nav, design tokens in :root
src/routes/+page.svelte -- responsive dashboard cards/panels

Files the agent should NOT touch:

src/auth.ts -- auth logic, not layout
src/hooks.server.ts -- server hooks, not layout

Acceptance Criteria

Design tokens from pal-e-playground in :root (all --color-*, --font-* vars)
Atkinson Hyperlegible loaded for body text
Viewport meta tag set correctly in app.html
Navigation works on 390px viewport (hamburger or bottom nav)
Dashboard cards/panels stack vertically on mobile, grid on desktop at 600px
Touch targets meet 44px minimum
Service links (Grafana, Harbor, MinIO, Forgejo) accessible on mobile
No horizontal scroll on any page