feat(web): widen the reading column and soften the composer card - #108
feat(web): widen the reading column and soften the composer card#108elkaix wants to merge 1 commit into
Conversation
The chat column was 760px and the composer card read as a small box with a fixed-height input. Widen `--read-max` to 928px, which the message list and the composer dock both derive from, so one value moves both. The card takes a 24px radius from the new `--r-xl` token, a translucent blurred surface, and a border that strengthens on hover and focus-within. The input grows with its content up to 384px and scrolls past that. Toolbar controls become 30px circles, with a divider after the attachment button and a 20px send glyph in 5px of padding. The send button keeps the theme accent rather than an inverted fill: the Pythinker theme defines that colour as its brand periwinkle. Behaviour is unchanged; this is geometry and colour only.
|
Warning Review limit reached
Next review available in: 24 minutes Limit details: You’ve used all 3 included reviews currently available under your plan. Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (6)
Comment |
commit: |
|
Closing: merged locally into main; a new PR will follow. |
1 participant
Related Issue
No issue. The problem is described below.
Problem
The chat reading column was 760px, which leaves the composer feeling narrow on any normal window, and the composer card read as a small box: a 16px radius, a flat opaque fill, and an input pinned to a fixed 56px height that never grew with the text.
What changed
--read-maxgoes from 760px to 928px. The message list and the composer dock both derive their width from that one variable, so nothing else needed a width of its own.--r-xltoken, a translucent surface with a backdrop blur, and a border that strengthens on hover and on:focus-within.Behaviour is untouched — drafts, history recall, IME handling, attachments and slash commands all work exactly as before. This is geometry and colour.
Two things worth calling out:
--blue, the theme accent. The design reference this port follows uses a monochrome inverted fill, and the first pass carried that across. That is wrong here: the Pythinker theme defines--blueas its brand periwinkle and the stylesheet cites a design spec for it. The geometry change stayed, the colour change was reverted, and the test now asserts the accent rather than a monochrome fill.field-sizing: content. Where that is unsupported the input stays at its 56px minimum and scrolls, which is the behaviour it had before this change, so the degradation is graceful.Verified locally: 334 web tests, typecheck and lint all pass, and the suite passes again after the pre-commit autofix. Every new assertion was mutation-checked.
Checklist
gen-changesetsskill, or this PR needs no changeset.gen-docsskill, or this PR needs no doc update.