-
Notifications
You must be signed in to change notification settings - Fork 181
Description
Browser
No response
Package version
v3.0.913
React version
v18.3.1
Description
On my page that uses SSR, I noticed that the top navigation immediately resized after pageload, going from a "narrow" mode to a larger style:
I also noticed that the class awsui_narrow_k5dlb_2ayr9_187
was attached to the top navigation in the page source, but removed after the page's JS executed.
I believe this code is responsible for the issue.
Deferring the breakpoint logic until the code runs on the client wouldn't solve the issue, since there could still be a mismatch between the appearance of the component as rendered in SSR and its appearance on the client. I believe the best solution would be to use CSS media queries instead of JavaScript to implement the breakpoint-based appearance modifiers.
Source code
No response
Reproduction
Render the top navigation with SSR and open in a desktop browser. When I noticed the issue, my browser viewport was 1024x wide.
Code of Conduct
- I agree to follow this project's Code of Conduct
- I checked the current issues for duplicate problems