Skip to content

Fix user popover overflow and fix follow/unfollow button alignment

Peter Hegman requested to merge 323686-user-popover-looks-narrowed-and-text-are-overflowed-outside into master

What does this MR do and why?

Related to #323686 (closed) and #361969 (closed)

Add word-break: break-word; to content. This will help prevent overflow of content in popovers. Originally I was using overflow-wrap: anywhere because word-break: break-word; is deprecated but then I realized Safari doesn't support overflow-wrap: anywhere so we are forced to use word-break: break-word; until Safari gets their act together 🙄

This MR also fixes a margin issue so that the follow/unfollow button is aligned correctly. (#361969 (closed))

Screenshots or screen recordings

Popover that had overflow

Before After
Screen_Shot_2022-05-10_at_10.38.17_AM Screen_Shot_2022-05-10_at_10.32.14_AM

Popover that did not have overflow

Expected to look the same

Before After
Screen_Shot_2022-05-10_at_10.38.34_AM Screen_Shot_2022-05-10_at_10.33.05_AM

How to set up and validate locally

  1. Enable the follow_in_user_popover feature flag
    • bin/rails console
    • Feature.enable(:follow_in_user_popover)
  2. Navigate to /-/profile
  3. Add long links to your bio
  4. Navigate to an issue and leave a comment
  5. Hover over your name

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Peter Hegman

Merge request reports