Skip to content

fix: mobile header layout overlap#1066

Merged
Spiral-Memory merged 2 commits intoRocketChat:developfrom
dodaa08:fix/mobile-header-overlap
Jan 15, 2026
Merged

fix: mobile header layout overlap#1066
Spiral-Memory merged 2 commits intoRocketChat:developfrom
dodaa08:fix/mobile-header-overlap

Conversation

@dodaa08
Copy link
Copy Markdown
Contributor

@dodaa08 dodaa08 commented Jan 15, 2026

Brief Title

Fix mobile header layout overlap

Acceptance Criteria fulfillment

  • Header icons wrap naturally when there are too many (Stormy Seas variant)
  • Light theme with fewer icons stays on one line
  • Channel name maintains minimum width (120px) and doesn't get squished
  • Icons wrap to second row at narrow widths (≤380px) when needed

Fixes #1065

Video/Screenshots

Screencast.From.2026-01-15.17-23-00.mp4

PR Test Details

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-1066 after approval. Contributors are requested to replace <pr_number> with the actual PR number.

- Add flex-wrap to header for natural content wrapping
- Set min-width on channel description to prevent over-shrinking
- Add responsive styles for icon row at narrow widths (≤380px)
Copy link
Copy Markdown
Collaborator

@Spiral-Memory Spiral-Memory left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Spiral-Memory Spiral-Memory merged commit c706b67 into RocketChat:develop Jan 15, 2026
4 checks passed
github-actions bot added a commit that referenced this pull request Jan 15, 2026
@Spiral-Memory Spiral-Memory added chore a subtle fix and removed testing labels Jan 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

chore a subtle fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Header icon row overlaps channel name on mobile in design variants

2 participants