diff --git a/loop/plan.md b/loop/plan.md index 7f1e8d7e..6ae0c031 100644 --- a/loop/plan.md +++ b/loop/plan.md @@ -54,13 +54,13 @@ ## Phase 5: Glass Button System & Utility Classes -- [ ] **T17** — Update `.glass-button` and `.glass-button-sm` in `packages/app/src/styles/main.css` to enforce 44px minimum height on mobile. Add a responsive rule: on screens ≤ 768px, `.glass-button` gets `min-height: 48px` and `.glass-button-sm` gets `min-height: 44px`. This catches all uses of these classes automatically. On desktop they stay as-is. +- [x] **T17** — Update `.glass-button` and `.glass-button-sm` in `packages/app/src/styles/main.css` to enforce 44px minimum height on mobile. Add a responsive rule: on screens ≤ 768px, `.glass-button` gets `min-height: 48px` and `.glass-button-sm` gets `min-height: 44px`. This catches all uses of these classes automatically. On desktop they stay as-is. -- [ ] **T18** — Audit all `!h-7 !min-h-0` overrides. These force 28px height, defeating the glass button minimum. Search all `.vue` files for `!h-7` and `!min-h-0`. Replace with mobile-responsive approach: keep desktop size but ensure 44px minimum on mobile using `min-h-[44px] md:min-h-0`. +- [x] **T18** — Audit all `!h-7 !min-h-0` overrides. These force 28px height, defeating the glass button minimum. Search all `.vue` files for `!h-7` and `!min-h-0`. Replace with mobile-responsive approach: keep desktop size but ensure 44px minimum on mobile using `min-h-[44px] md:min-h-0`. -- [ ] **T19** — Add a `.touch-target` utility class to `main.css`: `.touch-target { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }`. Then refactor at least 15 icon buttons across the app to use this class instead of manual min-w/min-h. This creates a reusable pattern for future development. +- [x] **T19** — Add a `.touch-target` utility class to `main.css`: `.touch-target { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }`. Then refactor at least 15 icon buttons across the app to use this class instead of manual min-w/min-h. This creates a reusable pattern for future development. -- [ ] **TEST:P5** — Run `pnpm typecheck && pnpm lint && pnpm test`. Commit and push. +- [x] **TEST:P5** — Run `pnpm typecheck && pnpm lint && pnpm test`. Commit and push. ## Phase 6: Modals, Dialogs & Overlays diff --git a/packages/app/src/components/chat/ChatHistory.vue b/packages/app/src/components/chat/ChatHistory.vue index b872be75..3ef8a152 100644 --- a/packages/app/src/components/chat/ChatHistory.vue +++ b/packages/app/src/components/chat/ChatHistory.vue @@ -1,7 +1,7 @@