Skip to content

fix(ui): resolve attachment metadata text overlap on mobile viewports#1195

Open
Aryan-Verma-999 wants to merge 1 commit intoRocketChat:developfrom
Aryan-Verma-999:fix/mobile-attachment-metadata-overlap
Open

fix(ui): resolve attachment metadata text overlap on mobile viewports#1195
Aryan-Verma-999 wants to merge 1 commit intoRocketChat:developfrom
Aryan-Verma-999:fix/mobile-attachment-metadata-overlap

Conversation

@Aryan-Verma-999
Copy link

Fixes #1194

Root Cause

The inner flex container in AttachmentMetadata.js switched to flex-direction: column at ≤420px with only 4px gap. The Tooltip wrapper around the title interfered with flex sizing, causing the elements to visually overlap instead of stacking properly.

Fix

  • Combined filename and file size into a single

    element: image.png (60.23 kB)

  • Removed the broken flex-direction: column media queries that caused the overlap
  • Kept the outer container using flex-wrap: wrap for the action buttons (expand/download)
  • Title still truncates at 20 characters with ... and shows full name on hover via Tooltip

before

ss1 #### after fixed

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.

bug: attachment metadata text overlaps on mobile viewports

1 participant