Repository navigation
style(web): polish the viewer without touching the locked palette - #488
Conversation
CSS-only refinement of the shipped Web viewer: type scale, spacing, radii, hover/focus states, and transcript bubbles. The legacy dark slate/green palette, the 960px layout, and every DOM id stay byte-for-byte unchanged, and no HTML or JavaScript changed. Co-Authored-By: Claude Code <noreply@anthropic.com>
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ba0495752f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| button { margin: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); } | ||
| input, select { margin: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); color: var(--text); transition: border-color 0.12s ease, background 0.12s ease; } | ||
| input:hover, select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } | ||
| input:focus, select:focus { border-color: var(--accent); background: var(--bg); outline: none; } |
There was a problem hiding this comment.
Preserve the keyboard focus ring on form controls
When a keyboard user focuses any input or select, this more-specific rule overrides the newly added :focus-visible outline with outline: none. Text fields retain only a thin border change, while native checkboxes such as “Hide tool-only sessions” may have no reliable visible focus indicator because their author-specified border/background are not consistently rendered; removing outline: none or limiting it to non-keyboard focus preserves the intended focus-visible state.
Useful? React with 👍 / 👎.
Summary
macos/EngramRemoteServer/Core/WebUIRoutes.swift): type scale and tracking, spacing rhythm, 12px card radii, pill badges and filter chips, hover/active/focus-visible states, a soft card shadow, tabular numerals, and transcript bubbles with a source-tinted assistant border plus a blurred sticky header.--bg:#0f172a,--panel:#1e293b,--accent:#22c55eand the rest of the legacy:rootline) is byte-for-byte unchanged, as are the 960px centered layout, the list/detail toggle, and every DOM id. No HTML or JavaScript changed.Test plan
xcodebuild test -scheme EngramRemoteServerCore -only-testing:EngramRemoteServerCoreTests/WebUIRoutesTests— 9 tests passednpx vitest run tests/scripts/collector-web-ui.test.ts— 180 tests passed🤖 Generated with Claude Code