Repository navigation
fix(app): line up the timeline, pill and composer text - #57336
Merged
Merged
Conversation
kitlangton
force-pushed
the
bottom-alignment
branch
from
October 20, 2026 07:51
3b074a1 to
9d73cfa
Compare
kitlangton
marked this pull request as ready for review
October 20, 2026 17:39
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Before / after, dark, 1440 (green: on the text column · blue: on the card edge · red: anything else)
Light 900 with the pill · dark 390 with the queue
The bottom of the session view had four different left edges for things that look like they share one. The timeline text, the "Move to background" hint, the composer placeholder, the composer's
+and the queue handle each started at a different x.The rule: the composer card is the timeline's text column grown by 12px on each side. Everything inside it that reads as text (placeholder,
+glyph, queue handle) starts on the text column. The send button's right edge ends on the text column's right edge, like the user bubble. Things that look like cards (the composer card and the activity pill's capsule) share the card edge, 12px outside the text column.Measured on the mocked e2e app, offsets from the timeline text column (wide, 1440 and 900, dark and light):
+glyphChanges
px-4→px-3.px-2→ps-1.5 pe-3, so the+glyph's ink and the send button's edge both sit 12px inside the card.ps-1→ps-0.5, so the handle dots start on the column, like the panel's header label.The composer card and the pill don't move, and the pill isn't restyled; its redesign is pending in D-7.
Not covered: below
mdthe timeline uses 16px padding while the composer card keeps 12px, so the card is only 4px outside the text. There, composer content moves from +12 to +8 and the send button's edge from −4 to −8. To fix that, the card or the mobile timeline padding would have to move; this PR leaves that for a separate call. The new-session composer uses the same editor, so its placeholder also moves 4px left.