feat(sessions): connect queued-message dock to the composer input#2852
feat(sessions): connect queued-message dock to the composer input#2852Twixes wants to merge 2 commits into
Conversation
Make the steer queued-message box read as one unit with the composer: flush against the input (no gap), top corners rounded less, square bottom. The input is rounded more and squares its top when a message is docked. Generated-By: PostHog Code Task-Id: 6abf8f78-ff62-4439-821f-9f71007a3532
|
React Doctor found no issues in the changed files. 🎉 Reviewed by React Doctor for commit |
|
Reviews (1): Last reviewed commit: "feat(sessions): connect queued-message d..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
|
||
| return ( | ||
| <Box className="rounded-lg border border-gray-5 bg-card px-3 py-2"> | ||
| <Box className="rounded-t-md border border-gray-5 border-b-0 bg-card px-3 py-2"> |
There was a problem hiding this comment.
border-b-0 applied to every queued message, not just the last one
QueuedMessageView always renders with border-b-0, so when two or more messages are stacked the non-last cards have no bottom border but still have gap-1 whitespace below them before the next card. This makes each intermediate card visually "open" at the bottom — the border draws three sides and stops, leaving a small gap before the next message's top border appears. Only the bottommost card actually benefits from border-b-0 (to connect flush to the composer). Consider using a :last-child selector or a positional prop to restrict the border removal to just the last message in the list.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
- Reorder the composer's conditional radius classes to satisfy Biome's useSortedClasses. - Only the bottom-most queued message connects flush to the composer (square, open bottom); intermediate stacked cards stay fully rounded so they don't look open-ended above the gap (Greptile review). Generated-By: PostHog Code Task-Id: 6abf8f78-ff62-4439-821f-9f71007a3532
1 participant
Problem
When steering, the queued message box sat a few pixels above the composer and was rounded more than the input — so it read as a separate, slightly mismatched card. Michael wanted the queued box to connect to the input at the bottom, rounded less, while the input gets rounded more.
Changes
The queued-message dock now connects flush to the composer as one unit:
QueuedMessageView):rounded-lg→rounded-t-mdwithborder-b-0— rounded less, only at the top, square bottom that shares a single seam line with the input.QueuedMessagesDock): dropped themb-1gap so it sits flush on the composer.PromptInput): new optionalattachedTopprop. The input is rounded more (rounded-xl) and squares its top corners (rounded-b-xl rounded-t-none) when a message is docked on top.SessionViewpassesattachedTopbased on whether any messages are queued.The
!modifiers are needed because quill's.quill-input-groupradius is imported unlayered and otherwise wins over Tailwind utilities.How did you test this?
Not run — dependencies aren't installed in this environment, so I couldn't run typecheck/lint or launch the app. Changes are CSS-class-only plus one optional prop with a default. Worth an eyeball in the running app (single queued message is the common case; multiple stacked messages keep the
gap-1separation).Automatic notifications
Created with PostHog Code from a Slack thread