From d436028b6655a236f9df0773d3bb0276a60eddfb Mon Sep 17 00:00:00 2001 From: xcaliber Date: Wed, 1 Apr 2026 20:14:24 +0000 Subject: [PATCH] Delete ROADMAP-UI.md --- ROADMAP-UI.md | 151 -------------------------------------------------- 1 file changed, 151 deletions(-) delete mode 100644 ROADMAP-UI.md diff --git a/ROADMAP-UI.md b/ROADMAP-UI.md deleted file mode 100644 index 9c93ff8..0000000 --- a/ROADMAP-UI.md +++ /dev/null @@ -1,151 +0,0 @@ -# Armature — v0.6.x UI Hardening Roadmap - -> **Goal**: Fix all viewport scaling, banner integration, and styling inconsistencies -> so Claude Code can run a meaningful automated usability survey against a -> stable, uniform UI. - ---- - -## Problem Inventory - -### P1 — Viewport & Scaling (blocks everything) - -| # | Issue | Where | Impact | -|---|-------|-------|--------| -| 1 | **Dual layout systems** — `base.html` template has its own banner→surface→footer column; `app-shell.js` Preact shell has a separate `sw-shell` → `sw-shell__body` → `sw-shell__surface` column. They never coordinate. | `server/pages/templates/base.html` ↔ `src/js/sw/shell/app-shell.js` | Every surface inherits an ambiguous viewport ancestor. | -| 2 | **Transform-based scaling is broken** — `transform: scale()` on `#surfaceInner` doesn't reflow layout. Breaks `getBoundingClientRect` (menu.js already carries a scale-correction hack at line 20), scroll containment, pointer events, and the inverse-width/height hack (`100/s%`) doesn't account for banners consuming viewport space. | `base.html:56-67`, `appearance.js:41-53`, `menu.js:20-33` | Menus, tooltips, dropdowns all mis-positioned at any non-100% scale. Click targets wrong. | -| 3 | **Banner height desync** — `base.html` hardcodes `--banner-h: 28px` and renders banners in-flow. `app-shell.js` ShellBanner measures `offsetHeight` into `--banner-top-height` / `--banner-bottom-height` and uses `position: fixed` + body padding. Two independent banner systems. | `base.html:31,72-75,103-107` ↔ `app-shell.js:25-42`, `sw-shell.css:22-37,63-69` | With banners enabled, content overflows by the banner height or gets double-inset depending on which code path is active. | -| 4 | **`100vh` on mobile** — `.sw-shell`, `.chat-app`, `.chat-loading`, `.login-shell` use `100vh` which doesn't subtract mobile browser chrome (address bar, toolbar). | `sw-shell.css:9`, `chat/css/main.css:15,25`, `sw-login.css:7` | Content overflows on iOS Safari, Android Chrome. | -| 5 | **Chat uses `100vh` not `100%`** — `.chat-app { height: 100vh }` ignores parent container (which already excludes banners/footer). Notes correctly uses `height: 100%`. Every extension surface that copies chat's pattern will inherit the bug. | `packages/chat/css/main.css:15` | Chat surface overflows behind banners. | - -### P2 — CSS Architecture - -| # | Issue | Where | Impact | -|---|-------|-------|--------| -| 6 | **Class name collisions** — `.settings-section` defined in both `modals.css:41-43` and `surfaces.css:75-83` with different padding, margin, and border-bottom rules. `.sw-dropdown` in `primitives.css:443` (styled `