Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(layout): prevent layout shift with sidebars #1705

Merged
merged 2 commits into from
Jul 30, 2023

Conversation

luchaos
Copy link
Member

@luchaos luchaos commented Jul 30, 2023

Apply lg:grid grid-cols-[1fr_340px] gap-4 in top brand, nav, and main content areas.

Prevents layout shift and works with wide layouts (see /demo).

Apply `lg:grid grid-cols-[1fr_340px] gap-4` in top brand, nav, and main content areas.
Prevents layout shift and works with wide layouts (see /demo).
@wescopeland
Copy link
Member

wescopeland commented Jul 30, 2023

Not sure if intentional, but noticed a subtle change. The sidebar now extends the full height of the left container. I don't think this is the end of the world, just want to call it out in case it was unintended.

Screenshot 2023-07-30 at 5 59 08 PM

@luchaos
Copy link
Member Author

luchaos commented Jul 30, 2023

Not sure if intentional, but noticed a subtle change. The sidebar now extends the full height of the left container. I don't think this is the end of the world, just want to call it out in case it was unintended.

whops, thanks! i shouldn't have removed align-self: start; - i'll add that back

Copy link
Member

@wescopeland wescopeland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great! I've confirmed no layout shift is present on both home and /demo:

Screenshot 2023-07-30 at 6 10 56 PM

Always love anything that gets us closer to enabling XL.

@luchaos luchaos merged commit bbe4816 into RetroAchievements:master Jul 30, 2023
5 checks passed
@luchaos luchaos deleted the app-layout-grid branch July 30, 2023 22:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants