fix(#3673): docs site bug sweep - push drawer filters, side menu, multi-sort, responsive grids by twjeffery · Pull Request #3675 · GovAlta/ui-components

twjeffery · 2026-03-24T22:07:15Z

Summary

Hands-on walkthrough of the docs site to find and fix accumulated issues after recent PRs landing (config examples, preview images, app header V2, push drawer, get started pages).

Side menu

Removed stale useGroupShadowDomFixes shadow DOM workaround. After feat: make icon optional in WorkSideMenuGroup and WorkSideMenuItem #3595 made icons optional, the workaround was hiding the chevron instead of the (now absent) leading icon.
Added missing onNavigate handler on Foundations sub-menu.

Push drawer filters (Examples, Components, Tokens)

Replaced overlay GoabxDrawer with GoabxPushDrawer on all three grid pages
Push drawer portaled outside the content card at the layout level so it pushes the card over
Negative margins on the portal cancel layout padding, letting the drawer's built-in offset handle spacing
--card-padding-h CSS variable keeps sticky toolbar width in sync across breakpoints
Filter button toggles drawer open/closed
At <1024px the push drawer falls back to modal overlay with proper z-index handling
Mobile header z-index drops when drawer is open using :has([open])

Responsive grids

Card grids changed from fixed repeat(4, 1fr) to auto-fill with minmax(200px, 1fr)
Service pattern cards use auto-fit with minmax(250px, 1fr)
Tokens toolbar stacking uses @container query instead of @media

Multi-sort tables

Enabled sort-mode="multi" on all three goa-table instances (using feat(#3344): add multi-column sorting to Table and TableSortHeader #3409)
Switched from _sort to _multisort event handling
Added sort-order attribute for visual "1"/"2" badges
Removed sort chips (redundant with header indicators), kept filter/search chips

Homepage

"Public form" links to /examples/public-form instead of /examples?userType=citizen
"Workspace" links to /examples/workspace instead of /examples?userType=worker

Sticky toolbar

::before constrained to content card padding (was left/right: -9999px)
Removed extra bottom margin when sticky
View toggle wrapper clipped to 40px

Mobile header

Title: body-s with greyscale-700 (was mobile-heading-xs)
Gap adjustments between menu button, logo, and title
Removed negative margins on icon buttons (16px from screen edge)

Other

Support page button changed to compact
Component card thumbnail margin reduced from space-xs to space-2xs

Test plan

Side menu: chevrons visible on category groups, all sub-menu items clickable
Push drawer: opens/closes on filter button, pushes content card, grid reflows
Push drawer <1024px: falls back to modal overlay, scrim covers mobile header
Push drawer mobile: modal drawer works, layout not broken
Multi-sort: click two columns, both show sort arrows with 1/2 badges
Homepage: service pattern cards link to correct pages
Sticky toolbar: constrained to content card width at all breakpoints
Mobile header: correct typography, spacing, icon button padding

…ti-sort, responsive grids Side menu: - Remove stale useGroupShadowDomFixes workaround (chevrons hidden after #3595) - Fix Foundations sub-menu navigation (missing onNavigate handler) Push drawer filters (Examples, Components, Tokens pages): - Replace overlay drawer with push drawer portaled outside content card - Responsive auto-fill grids that reflow when drawer opens - Filter button toggles drawer, modal fallback <1024px with z-index handling - Mobile header z-index drops when drawer open via :has([open]) - Layout padding and --card-padding-h variable for sticky toolbar sync Multi-sort tables: - Enable sort-mode="multi" and _multisort events on all tables - Add sort-order prop for visual 1/2 badges - Remove redundant sort chips, keep filter/search chips only Responsive container-aware layout: - Container queries for toolbar stacking and view switching - useContainerNarrow hook (ResizeObserver) replaces viewport-based useMobile - Tables auto-switch to cards when container narrows, user can override - Horizontal scroll on tables with edge shadows and card-edge bleed - Mobile icon-only filter button with search + filter on one row - Table column width constraints (name, value) Homepage and misc: - Service pattern links go to /examples/public-form and /examples/workspace - Responsive pattern card grid with auto-fit - Support page button compact, component card thumbnail margin fix - Sticky toolbar constrained to content card width - Mobile header: body-s typography, adjusted spacing and icon padding - Fix description ellipsis truncation (was checking full body length) - Table 1px border overflow workaround (calc 100% - 2px)

Spark450

Changes made as discussed

chrisolsen · 2026-03-30T20:29:49Z

🎉 This PR is included in version 1.41.0-dev.28 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-30T20:30:29Z

🎉 This PR is included in version 6.11.0-dev.18 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-30T20:41:21Z

🎉 This PR is included in version 2.0.0-dev.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-30T20:42:59Z

🎉 This PR is included in version 5.0.0-dev.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:21:11Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:29:35Z

🎉 This PR is included in version 2.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:38:00Z

🎉 This PR is included in version 7.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:46:39Z

🎉 This PR is included in version 5.0.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-31T23:57:43Z

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:29:41Z

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:38:28Z

🎉 This PR is included in version 7.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-04-01T00:46:51Z

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

twjeffery requested a review from Spark450 March 24, 2026 22:13

Spark450 reviewed Mar 24, 2026

View reviewed changes

Comment thread docs/src/components/ExamplesGrid.tsx

Comment thread docs/src/pages/examples/index.astro

Spark450 requested a review from chrisolsen March 25, 2026 15:28

bdfranck self-requested a review March 25, 2026 15:54

twjeffery force-pushed the tom/docs-bugs branch 3 times, most recently from e5df59c to 34002ae Compare March 25, 2026 21:57

twjeffery force-pushed the tom/docs-bugs branch from 34002ae to aaf3f2a Compare March 25, 2026 22:06

twjeffery requested a review from Spark450 March 25, 2026 22:08

Spark450 approved these changes Mar 25, 2026

View reviewed changes

chrisolsen approved these changes Mar 26, 2026

View reviewed changes

chrisolsen merged commit 8ca4a49 into dev Mar 26, 2026
4 checks passed

chrisolsen deleted the tom/docs-bugs branch March 26, 2026 20:20

chrisolsen added the released on @dev label Mar 30, 2026

chrisolsen added the released on @next label Mar 31, 2026

chrisolsen added the released Released into production. label Mar 31, 2026

Conversation

twjeffery commented Mar 24, 2026 • edited by Spark450 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Side menu

Push drawer filters (Examples, Components, Tokens)

Responsive grids

Multi-sort tables

Homepage

Sticky toolbar

Mobile header

Other

Test plan

Uh oh!

Uh oh!

Uh oh!

Spark450 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chrisolsen commented Mar 30, 2026

Uh oh!

chrisolsen commented Mar 30, 2026

Uh oh!

chrisolsen commented Mar 30, 2026

Uh oh!

chrisolsen commented Mar 30, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Mar 31, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

chrisolsen commented Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

twjeffery commented Mar 24, 2026 •

edited by Spark450

Loading