fix: milestone popover date wrapping

Relates to issue #81104 (moved)

Changes

This MR fixes the milestone popover date wrapping issue by making three key improvements to app/assets/javascripts/issuable/popover/components/milestone_popover.vue:

  1. Removed minimum width constraint
    • Removed :css-classes="['gl-min-w-34']" prop from the <gl-popover> component
    • The popover now sizes naturally based on content, consistent with issue and MR popovers
  2. Removed title width constraint
    • Changed class="gl-my-3 gl-max-w-30" to class="gl-my-3" on the title heading
    • The title can now use available space naturally without artificial constraints
  3. Added flex-wrap to first row layout
    • Changed class="gl-flex gl-items-center gl-gap-2" to class="gl-flex gl-flex-wrap gl-items-center gl-gap-2"
    • The timeframe text will now wrap to a complete new line gracefully when needed, rather than breaking mid-text

The changes made by Duo were incorrect. I have manually edited this MR -- all that was needed was gl-whitespace-nowrap on the milestone dates.

Before After
Screenshot 2025-11-26 at 12.09.49.png Screenshot 2025-11-26 at 12.09.08.png

Expected Improvements:

No more awkward mid-text wrapping of milestone dates
Popover sizes naturally based on content
Better user experience across different languages
Consistent behavior with other popover components
More flexible and responsive layout

Edited by Chad Lavimoniere

Merge request reports

Loading