[Bug]: Visual glitches during SSR due to responsive design hooks

[TrevorBurnham]

Browser

Chrome

Package version

v3.0.1086

React version

v19.1.1

Description

When rendering a Cloudscape layout with SSR, the page initially renders with mobile styles, then updates with styles appropriate to the viewport size when it's hydrated with JavaScript. That's due to responsive design being implemented with the useBreakpoints and useContainerQuery hooks in JavaScript instead of CSS.

Affected layout components include:

• TopNavigation (I've submitted a patch: fix: Implement TopNavigation breakpoints in CSS #3371)
• AppLayout and AppLayoutToolbar, specifically the breadcrumbs slot (even if BreadcrumbGroup isn't used)
• SideNavigation

With all targeted browsers now supporting container queries in CSS, we should be able to use CSS instead of JS consistently for these styles. Doing so would fix these visual glitches and also likely improve performance.

Source code

https://github.com/TrevorBurnham/cloudscape-ssr-example

Reproduction

https://codesandbox.io/p/github/TrevorBurnham/cloudscape-ssr-example/main?import=true

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[cansuaa]

Hi Trevor, thank you for your PRs and contributing this to the system. The PRs are in review.