Skip to content

Responsive equipGear modal and popover - fixes #10048#15621

Open
michaelpipkin wants to merge 3 commits into
HabitRPG:developfrom
michaelpipkin:issue_10048
Open

Responsive equipGear modal and popover - fixes #10048#15621
michaelpipkin wants to merge 3 commits into
HabitRPG:developfrom
michaelpipkin:issue_10048

Conversation

@michaelpipkin

Copy link
Copy Markdown

Fixes #10048

Changes

When using non-English languages, the equipment stat grid (STR/INT/CON/PER) in both the equip gear modal and the equipment popover could cause translated text to wrap mid-word or overflow its container. This happened because the layout relied on fixed widths and percentage-based sizing that did not accommodate longer translated strings.

The root cause was a circular width expansion chain: .inner-content used width: max-content, which caused it to expand to the size of its children. Those children (.popover-content-attr) used calc(50% - 1px) percentages, which calculated against the inflated parent — creating a feedback loop. Additionally, the flex-wrap layout on .attributes-group had no stable column-width reference, so stat boxes could end up different sizes or wrap unexpectedly.

  • Changed .attributes-group from display: flex; flex-wrap: wrap to display: grid; grid-template-columns: repeat(2, 1fr). The CSS Grid always places stat boxes in pairs and sizes columns by content, eliminating flex-wrap timing issues.
  • Changed .popover-content-attr from percentage-based width (calc(50% - 1px)) to width: fit-content. Each stat box is now only as wide as its content requires; the grid handles column placement.
  • Added width: fit-content to .group-content so the inner label/value grid does not stretch beyond its content.
  • Removed now-redundant 1px margin hacks on even/first-two children (the grid handles placement natively).
  • Added width: fit-content to .modal-content, .modal-body, and .content to propagate content-driven sizing up through the Bootstrap modal structure.
  • Changed .inner-content from width: max-content to width: fit-content, breaking the circular expansion chain. The existing min-width: 282px is retained to enforce a minimum size in English.

UUID: 894f5a0d-d3f7-4f45-a0f9-29bf86e6d461

@michaelpipkin

Copy link
Copy Markdown
Author

I'm a first time contributor so the workflow for tests hasn't run automatically. Please can an admin click the button to start it?

@michaelpipkin michaelpipkin changed the title Responsive equipGear modal and popover Responsive equipGear modal and popover - fixes #10048 Feb 28, 2026
@michaelpipkin

Copy link
Copy Markdown
Author

Current behavior:
image

Fixed behavior:
image

@SabreCat
SabreCat force-pushed the develop branch 2 times, most recently from 2d54f93 to d465efa Compare April 8, 2026 20:36
@michaelpipkin

Copy link
Copy Markdown
Author

@SabreCat is there anything else I need to do to move this along? Or is it just in the pipeline, waiting for a review and approval?

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.

equipment piece's stat screen should adapt to different language text lengths

1 participant