mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs(21): fix UI-SPEC typography, spacing, and visuals per checker

Browse source
This commit is contained in:
Nexus Dev 2026-04-01 16:02:39 +00:00
parent babff844e5
commit 766069c00e
1 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
.planning/phases/21-chat-foundation/21-UI-SPEC.md
View file

@ -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.
---