Fix mobile sidebar overlap#133
Merged
Merged
Conversation
Collaborator
Author
|
@copilot review |
There was a problem hiding this comment.
Pull request overview
This PR addresses a responsive-layout regression where the fixed TOC sidebar could overlap article content on mobile/tablet portrait widths due to main.css importing mobile-responsive.css before later applying the default desktop .book-sidebar { transform: translateX(0); } rule. The fix ensures the “closed drawer” transform remains authoritative at <=1024px while preserving the existing checked/open behavior.
Changes:
- Make the closed mobile drawer state (
transform: translateX(-100%))!importantso it can’t be overridden by the later desktop sidebar transform. - Add an explanatory comment documenting the cascade/root-cause and why
!importantis used. - Apply the same change to both tracked copies of
mobile-responsive.css.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| IT-engineer-communication-book/docs/assets/css/mobile-responsive.css | Forces closed-drawer transform to win over the later desktop sidebar transform rule at <=1024px. |
| docs/assets/css/mobile-responsive.css | Mirrors the same closed-drawer !important transform and documentation for the published docs tree. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Copilot stopped work on behalf of
ootakazuhiko due to an error
June 7, 2026 02:52
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
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.
Summary
<=1024pxdespite the later desktop.book-sidebar { transform: translateX(0); }rule inmain.css.docstree and the nested repository copy stay consistent.Root cause
main.cssimportsmobile-responsive.cssbefore declaring the default desktop sidebar transform. On mobile/tablet widths the main content margin is removed, but the later desktoptransform: translateX(0)could override the mobile closed-drawertransform: translateX(-100%), causing the fixed TOC sidebar to paint over article content.This PR makes the mobile closed-drawer transform important. The checked/open selector is already more specific and important, so the drawer still opens normally when toggled.
Verification
npm cinpm testnpm run buildgit diff --checkdocs/_siteserved at/IT-engineer-communication-book/; Pages visual checker over 2 pages × 5 viewports passed:phone480,tablet(768px),tablet820,laptop1024,desktopbooks=1 pages=10 ok=10 warn=0 fail=0/and/chapter-quickstart/confirmed:Refs itdojp/it-engineer-knowledge-architecture#168.