Skip to content

fix(ui): eliminate button overlapping on PC and mobile viewports with flex gaps - #8

Merged
ankhang0704 merged 1 commit into
mainfrom
fix/button-layout-overlap
Oct 8, 2026
Merged

ankhang0704 merged 1 commit into
mainfrom
fix/button-layout-overlap

Conversation

@ankhang0704

Copy link
Copy Markdown
Owner

Summary

  • Fixed button collision and overlapping across desktop and mobile viewports.
  • Configured .vault-relay-action-row, .vault-relay-actions-row, .vault-relay-filter-bar, and .vault-relay-conflict-actions\ as robust flex containers with explicit gap and margin separation.
  • Set base buttons to \display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; white-space: nowrap;.
  • Improved mobile responsive rules (@media (max-width: 480px)) with explicit vertical gaps (8-10px) and a two-column responsive chip layout for filter bars.
  • Added automated test \C5-MOBILE-006\ to guard against future button layout regressions.

@ankhang0704
ankhang0704 merged commit 32d0acd into main Oct 8, 2026
4 checks passed
@ankhang0704
ankhang0704 deleted the fix/button-layout-overlap branch October 8, 2026 04:22
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