From 766069c00e47de258971f16c2fa32b02e3288c2b Mon Sep 17 00:00:00 2001 From: Nexus Dev Date: Wed, 1 Apr 2026 16:02:39 +0000 Subject: [PATCH] docs(21): fix UI-SPEC typography, spacing, and visuals per checker --- .planning/phases/21-chat-foundation/21-UI-SPEC.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/.planning/phases/21-chat-foundation/21-UI-SPEC.md b/.planning/phases/21-chat-foundation/21-UI-SPEC.md index 47049dcb..0e9a48a5 100644 --- a/.planning/phases/21-chat-foundation/21-UI-SPEC.md +++ b/.planning/phases/21-chat-foundation/21-UI-SPEC.md @@ -66,6 +66,8 @@ The `ChatPanel` is a fixed-width right-side drawer, positioned as a sibling of ` Alternatively, the drawer can be a single-column panel toggling between conversation list view and message thread view (simpler for Phase 21; agent streaming in Phase 22 makes the two-column layout more valuable). **Use two-column layout within the 380px drawer**: left column 160px (conversation list), right column flex-1 (message thread + input). +**Focal point:** Primary visual anchor: `ChatMessageList` (flex-1 thread pane); secondary anchor: `ChatInput` (sticky bottom). + ### Chat Panel Trigger Add a `MessageSquare` icon button to the top-right control area of `Layout.tsx` (or to `BreadcrumbBar`), using the same `Button variant="ghost" size="icon-sm"` pattern as the existing theme toggle and settings buttons. @@ -89,7 +91,7 @@ Declared values (all multiples of 4): **Exceptions:** - Chat input area: `px-3 py-2` (12px/8px) — matches existing BreadcrumbBar footer pattern - Message bubble padding: `px-3 py-2` for compact density -- Code block padding: `padding: 0.5rem 0.65rem` — matches existing `.paperclip-markdown pre` rule in `index.css` +- Code block padding: `padding: 0.5rem 0.65rem` — inherited from existing `.paperclip-markdown pre` rule in `index.css`; not introduced or modified in Phase 21 - Touch targets: minimum 44px height on `@media (pointer: coarse)` — already enforced globally in `index.css` --- @@ -102,11 +104,13 @@ All sizes and weights are drawn from the existing `.paperclip-markdown` and `ind |------|------|--------|-------------|-------| | Body / message text | 15px (0.9375rem) | 400 | 1.6 | Chat message prose (`paperclip-markdown` font-size: 0.9375rem; line-height: 1.6) | | Label / UI chrome | 13px (0.8125rem) | 400 | 1.4 | Conversation list titles, timestamps, sidebar nav (`text-[13px]` already used in Layout) | -| Subheading | 14px (0.875rem) | 500 | 1.4 | Code block language labels, drawer section headers | +| Subheading | 13px (0.8125rem) | 400 | 1.4 | Code block language labels, drawer section headers — differentiated from body by context and container, not size alone | | Heading (in markdown) | 20px (1.25rem) | 600 | 1.3 | `## ` headings inside agent responses (`.paperclip-markdown h2`) | **Weights used:** 400 (regular) and 600 (semibold). No additional weights. +**Note on Subheading vs Label:** Both are 13px / 400. Subheading elements (language labels, section headers) are differentiated from body prose (15px) by a 2px size difference and by their placement within distinct UI containers (code block toolbar, panel header), not by a separate weight. A 14px intermediate size was considered and rejected — the 1px gap from 15px body was insufficient differentiation without a weight cue. + **Monospace font (code blocks):** `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace` — matches existing `.paperclip-markdown code` declaration. ---