Fix long title squashing in g-card#22621
Conversation
Add responsive layout to GCard header that prevents badges from squashing the title. Title section now has min-width of 50% and badges wrap to next line when needed.
GCard's responsive width rules use `@container cards-list (max-width: ...)` to drop cards from 1/3 width to 1/2 / full width on narrow viewports. RecentDownloads.vue had no `container: cards-list / inline-size` declaration anywhere up the tree, so those queries never fired and cards stayed at `calc(100% / 3)` regardless of viewport width — which, combined with the recently fixed title squashing, was producing per-syllable title wrapping in the export card on narrow screens. Match the idiom used by WorkflowCardList and HistoryCardList.
github-actions
Bot
changed the title
github-project-automation
Bot
moved this from Needs Review
to Done
in Galaxy Dev - weeklies
|
Got overexcited and merged! Should we backport it to 26.0 as a bug fix? |
|
Badges are going under the title, and it feels weird/inconsistent with other cards in the list, as you see in the screenshots below. 
Should we revert these changes and fix them in a better way? I also think the GCard styling might need an overhaul/review in its responsive system. I was about to add this comment, but it got merged sooner. |
I think it would be best to backport these commits to 26.0, then add the "proper fix" on top directly on 26.0, so it will be cleaner when merged forward. Sorry for the premature merge! |
4 participants
Before:
After:
first commit cherry-picked from dannon/invocation-tag-wrap which hasn't been merged yet.
How to test the changes?
(Select all options that apply)
License