Skip to content

🤖 fix: drop the creation headline and align docked surfaces with the transcript column - #3758

Merged
ibetitsmike merged 2 commits into
mainfrom
mike/chat-column-alignment
Jul 29, 2026
Merged

🤖 fix: drop the creation headline and align docked surfaces with the transcript column#3758
ibetitsmike merged 2 commits into
mainfrom
mike/chat-column-alignment

Conversation

@ibetitsmike

@ibetitsmike ibetitsmike commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Summary

Removes the "Let's get building." headline from the creation page, and lines every surface in the composer dock up with the transcript column so the composer stops floating in the middle of a full-width transcript.

Background

Both reported from the chrome redesign in #3753. Rebased onto main now that #3757 has merged, so this diff is only the two commits below.

The headline gave a static string the largest type on the page. It was already sr-only below 768px, so this removes it outright.

The alignment bug is structural. The composer dock lives inside the transcript scrollport and cancels its px-[15px] gutter with mx-[-15px] so it can paint full-bleed. Every surface inside the dock therefore has to re-apply that gutter and follow the transcript's width mode. They all hardcoded px-4 (16px) plus mx-auto max-w-4xl instead.

Centered mode hid this completely: the transcript and the docked surfaces shared both a center line and the same 4xl cap, so their edges coincided by accident. Turn on chatTranscriptFullWidth and the transcript uncaps while everything docked stays 896px wide.

Implementation

CHAT_DOCK_GUTTER_CLASS (in constants/layout) plus ChatDockColumnProvider / useChatDockColumnWidthClass / ChatDockSurface (in components/ChatPane/chatDockColumn) now carry the contract. The dock provides the width mode; surfaces inside consume it.

Applied to the composer section, ChatInputDecoration (todos, background bashes, reviews, queued messages, chat instructions), ConcurrentLocalWarningDecoration, and TranscriptOnlyNoticePane. The second commit sweeps three decoration-lane entries that never followed the column in either mode: the compaction warning and context-switch banner carried their own mx-4, and the pre-stream task card had no gutter at all. All three go through ChatDockSurface, and the two mx-4 values are removed so the wrapper is the single source of the inset.

The width mode resolves through context rather than calling useChatTranscriptFullWidth per surface, because that hook also issues a config.getConfig fetch and an onConfigChanged subscription per instance, and the dock can hold several decorations at once.

Validation

Measured at 1500px with the left sidebar collapsed: in full-width mode the transcript rows, composer box, background-bash decoration, and auto-compact label all span 35..1465; centered, all cap at 896.

Two play tests (FullWidthTranscriptAlignment, CenteredTranscriptAlignment) assert every docked surface shares the transcript column's left and right edges, including each ChatDockSurface-wrapped entry. Four red-green toggles:

toggle failure
width class reverted to the hardcoded cap Docked composer is inset ... by 157px left and 157px right
gutter reverted to px-4 ... by 1px left and 1px right
compaction warning unwrapped No ChatDockSurface-wrapped entry rendered
transcript pinned to centered Transcript is 896px wide, so this story is not in full-width mode

The centered story separately asserts the scrollport has room to exceed the cap, so it proves the cap is what limits the column rather than the available width.

One trap worth recording: updatePersistedState(CHAT_TRANSCRIPT_FULL_WIDTH_KEY, true) does not enable full width in a story, because useChatTranscriptFullWidth syncs from config.getConfig and overwrites it. The story would silently run centered and pass with the bug present. setupSimpleChatStory now takes chatTranscriptFullWidth and threads it to the mock config.

Risks

Expect Pixel diffs on any story showing the compaction warning, context-switch banner, or pre-stream task card: those move from a 16px full-bleed inset onto the composer column, which is the intended correction.

Not fixed here, pre-existing and unrelated to width mode: in centered mode the composer's toast overlay is positioned against the outer section rather than the inner column, so it spans nearly the whole dock. Moving its containing block would also shift it vertically, so it needs its own change.


Generated with mux • Model: anthropic:claude-opus-5 • Thinking: xhigh

@ibetitsmike

Copy link
Copy Markdown
Contributor Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Keep it up!

Reviewed commit: f15c692d71

ℹ️ 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".

Base automatically changed from mike/mobile-status-bar to main July 29, 2026 15:28
…nscript

The "Let's get building." headline gave a static string the largest type on the
creation page, so remove it.

The composer dock cancels the transcript scrollport's gutter so it can paint
full-bleed, and every surface inside it re-applied that gutter as px-4 (16px)
with a hardcoded max-w-4xl column. In full-width mode the transcript is no
longer capped, so the composer, its decorations, and the warning banners stayed
896px wide inside a much wider transcript. Share the gutter and the width mode
through one hook so docked surfaces track the transcript column in both modes.
Review of the first commit found three dock entries it missed: the compaction
warning and context-switch banner carried their own mx-4, and the pre-stream
task card had no gutter at all, so none of them tracked the transcript column in
either width mode. Wrap all three in a ChatDockSurface.

Resolve the width mode through a context the dock provides rather than calling
the preference hook per surface, since that hook also fetches and subscribes to
the backend config.
@ibetitsmike
ibetitsmike force-pushed the mike/chat-column-alignment branch from f15c692 to 0d8e932 Compare July 29, 2026 15:31
@ibetitsmike

Copy link
Copy Markdown
Contributor Author

@codex review

@ibetitsmike
ibetitsmike merged commit e8fd054 into main Jul 29, 2026
18 checks passed
@ibetitsmike
ibetitsmike deleted the mike/chat-column-alignment branch July 29, 2026 15:33
@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Keep them coming!

Reviewed commit: 0d8e9328f9

ℹ️ 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".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant