Fix two mobile chat-widget polish bugs (input height, header seam)#6
Open
aaronaccessvr wants to merge 1 commit into
Open
Fix two mobile chat-widget polish bugs (input height, header seam)#6aaronaccessvr wants to merge 1 commit into
aaronaccessvr wants to merge 1 commit into
Conversation
ChatInput textarea collapsed on first mount: the chat iframe starts display:none until the parent page calls open(), and on mobile WebKit that means scrollHeight reads back at zero at mount time. The old resize() wrote that zero as an inline height, so the field rendered too short until the first keystroke ran resize again with the iframe visible. Skip resize when the textarea is empty and let rows="1" provide the natural one-line height. White seam at the bottom of the dark header bar on the channel-select screen: ChatHeader and the page's heading slot both use mainColor as their background, but a 1px gap can still appear at the flex boundary between them on mobile WebKit, showing the body's white through. Give ChatHeader -mb-px so the next flex item overlaps the header's last pixel; the two same-color regions meet without a visible gap. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 tasks
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
Two small mobile-only visual fixes:
ChatInput.vue— textarea collapsed on first mount.The chat iframe starts
display: none(parent page only flips it visible afteropen()), so on mobile WebKitscrollHeightreads back as zero whenresize()runs fromonMounted(focus). The old code wrote that zero as an inlinestyle.height, leaving the field too short until the first keystroke ranresize()again with the iframe now visible. Fix: when the textarea is empty, skip touching the height and letrows="1"provide the natural one-line height.ChatHeader.vue— white seam at the bottom of the dark header bar on the channel-select screen.ChatHeaderand the home-page heading slot (Start a conversation / What channel do you prefer?) both usemainColoras their background, but a 1px gap can still appear at the flex boundary between them on mobile WebKit — showing the iframe<body>'s white through. Added-mb-pxtoChatHeader's outer div so the next flex item overlaps the header's last pixel; the two same-color regions meet without a visible gap.Test plan
🤖 Generated with Claude Code