fix: shift main content past fixed sidebar dock on desktop#1199
Merged
steam-bell-92 merged 1 commit intoJun 17, 2026
Merged
Conversation
The 'clean' sidebar overrides at the end of styles.css were zeroing out the desktop padding-left values (296px expanded, 128px collapsed) that the @media (min-width: 1100px) block sets. As a result the fixed position sidebar overlapped the projects grid on the left and clipped the first column of cards (Dots & Boxes -> and Boxes, FLAMES -> MES, etc.). - Move the mobile-only padding: 0 overrides inside @media (max-width: 1099px) so they no longer cancel the desktop-aware layout. - Add a smooth padding-left transition for the desktop sidebar state changes (open / collapse / close). Closes steam-bell-92#1155 Closes steam-bell-92#1136
|
@Ashvin-KS is attempting to deploy a commit to the Anuj's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
|
🎉 Thank you for your contribution! Your Pull Request has been merged successfully. We appreciate the time and effort you put into improving this project. Contributions like yours help the repository grow and stay useful for everyone. If you'd like to contribute again, please check the open issues and make sure you are assigned before opening another Pull Request. Thanks again for your support! 🙌 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fixes the desktop sidebar overlap bug: when the fixed-position sidebar (
.sidebar-dock, 280px wide / 80px when collapsed) is open or collapsed, the main.projects-sectionwas being shifted over it instead of pushing past it. Cards in the leftmost column of the projects grid were clipped (e.g. "Dots & Boxes" rendered as "and Boxes", "FLAMES Game" as "MES Game", and the first "Try It" buttons were partially hidden).Root cause: the
Sidebar Layout - Clean versionblock at the end ofweb-app/css/styles.cssdefinedpadding-left: 0 !importantfor.projects-section(and its sidebar-state variants) at the document root. That rule loaded after the@media (min-width: 1100px)desktop-aware block (lines 1876-1917) which correctly setspadding-left: 296px(expanded) and128px(collapsed), and the!importantflag was canceling those desktop values for every viewport.Fix:
padding: 0overrides inside@media (max-width: 1099px)so they only apply on mobile, where the sidebar is a drawer and the projects section should occupy the full width.padding-lefttransition on the desktop sidebar-state changes (280ms cubic-bezier(0.16, 1, 0.3, 1)), matching the easing already used by the sidebar drawer itself.The result: on desktop the projects grid (and hero / playground / footer) now slide smoothly past the sidebar as it expands, collapses, and closes. On mobile the drawer behavior is unchanged.
Linked Issue
Closes #1155
Closes #1136
Contribution Checklist