Skip to content

🐛 fix(mobile): size ChatHeader to its container instead of the viewport - #617

Open
thisisharsh7 wants to merge 1 commit into
lobehub:masterfrom
thisisharsh7:fix/chat-header-width
Open

thisisharsh7 wants to merge 1 commit into
lobehub:masterfrom
thisisharsh7:fix/chat-header-width

Conversation

@thisisharsh7

Copy link
Copy Markdown

💻 变更类型 | Change Type

  • ✨ feat
  • 🐛 fix
  • ♻️ refactor
  • 💄 style
  • 🔨 chore
  • 📝 docs

🔀 变更说明 | Description of Change

ChatHeader used width: 100vw, so it sized to the browser window instead of its parent and overflowed any narrower container. On the docs page this clipped the title text and added a horizontal scrollbar. Changed to width: 100%.

Also switched the demo to layout="bare", since layout="center" shrink-wraps a full-width bar. Matches ChatInputArea and TabBar.

Before: header rendered 1200px wide inside a 543px frame, so Title was cut to Titl and a horizontal scrollbar appeared.

Screen.Recording.2026-08-17.at.5.54.55.PM.mov

After: header fills its 543px frame, text intact, no overflow.

Screen.Recording.2026-08-17.at.5.55.31.PM.mov

📝 补充信息 | Additional Information

TabBar and SafeArea have the same 100vw; left out to keep this scoped.

@vercel

vercel Bot commented Aug 17, 2026

Copy link
Copy Markdown

@thisisharsh7 is attempting to deploy a commit to the LobeHub OSS Team on Vercel.

A member of the Team first needs to authorize it.

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