Skip to content

fix(app): line up the timeline, pill and composer text - #57336

Merged
kitlangton merged 1 commit into
betafrom
bottom-alignment
Oct 20, 2026
Merged

kitlangton merged 1 commit into
betafrom
bottom-alignment

Conversation

@kitlangton

@kitlangton kitlangton commented Oct 20, 2026 •

Copy link
Copy Markdown
Contributor

Before / after, dark, 1440 (green: on the text column · blue: on the card edge · red: anything else)

dark 1440 with the queue open

Light 900 with the pill · dark 390 with the queue

light 900

dark 390

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):

Element Before After
Timeline text, Working 0 0
"Move to background" hint (ghost button) +9 0
Composer placeholder +4 0
+ glyph +2 0
Queue row handle +2 0
Send button, right edge +4 0 (matches the user bubble)
Composer card, pill capsule −12 −12 (unchanged)
Pill icon −3 −3 (unchanged)

Changes

  • Composer editor and placeholder: px-4 → px-3.
  • Composer bottom row: px-2 → ps-1.5 pe-3, so the + glyph's ink and the send button's edge both sit 12px inside the card.
  • Queue rows: ps-1 → ps-0.5, so the handle dots start on the column, like the panel's header label.
  • The "Move to background" ghost button, when it leads the status lane, pulls back by its 9px padding so its label starts on the column. Its hover fill extends into the gutter.

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 md the 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.

@kitlangton
kitlangton marked this pull request as ready for review October 20, 2026 17:39
@kitlangton
kitlangton merged commit 3bb7ed0 into beta Oct 20, 2026
11 of 17 checks passed
@kitlangton
kitlangton deleted the bottom-alignment branch October 20, 2026 17:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant