Tighten mobile conversation gutters - #1382
Merged
Merged
Conversation
On phones the app shell's px-4, the full-page messages container's 1rem side padding, and the assistant card's px-4 stacked, putting assistant text ~48px from the screen edge while the fixed composer sat at 16px. Below sm, drop the messages container's side padding and the assistant card's horizontal padding (the card's background matches the page, so that padding was invisible spacing). Messages now line up with the composer at the shell's 16px inset. The session skeleton gets the same treatment. Desktop layout is unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017JvdS58zu1zVgJvH9U2ThE
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
2 participants
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.
Summary
On phones, three layers of side padding stacked up in a conversation:
px-4)1remeach side)px-4), whose background matches the page, so it read as empty marginAssistant text ended up ~48px from the screen edge while the fixed composer sat at 16px.
Below the
smbreakpoint (640px) this PR:chat-container.component.css— drops the full-page messages container's side padding; restores1remfromsmup.message-list.component.html— assistant card goes frompx-4topx-0 sm:px-4.chat-container.component.html— session skeletonpx-4→sm:px-4, so text doesn't shift when the conversation finishes loading.Messages now align with the composer at the shell's 16px inset. Tablet/desktop layout is unchanged.
Testing
ng testoversrc/app/session/**and the root app specs: 94 files, 1248 tests passed.🤖 Generated with Claude Code
https://claude.ai/code/session_017JvdS58zu1zVgJvH9U2ThE
Generated by Claude Code