Fix recommended section responsive layout and spacing

Austin Regneryrequested to merge
fix-recommended-section-responsive into main

What

Fixes the recommended section in the feature library not breaking into a list view at smaller breakpoints like the rest of the items, and adds more spacing between recommended options.

How

  • The recommended section is a nested grid inside .popover__body. The global @media (width <= 900px) rule in PopoverComponent.vue collapses .popover__body to a flex column, but does not reach the nested .recommended-section, which kept its repeat(3, 1fr) grid. Added a matching @media (width <= 900px) rule so it collapses to a list view too.
  • Increased spacing between recommended items (grid gap 4px 8px → 8px 12px, list gap scale-1 → scale-2).

Merge request reports