Fix mobile sidebar closed state#170
Conversation
|
@copilot review |
|
📚 Preview DeploymentYour changes have been deployed to a preview environment: 🔗 Preview URL: https://itdojp.github.io/ai-testing-strategy-book/pr-preview/pr-170/ Preview Details
|
Reviewed the current PR changes; no additional code changes are needed for this comment. |
There was a problem hiding this comment.
Pull request overview
This PR fixes an ordering/cascade issue where the desktop .book-sidebar { transform: translateX(0); } rule in main.css could override the intended closed mobile/tablet drawer state, leaving the TOC covering content on smaller viewports. It does so by making the closed-state transform declaration !important within the @media (max-width: 1024px) rules, while leaving the checked/open rule behavior intact.
Changes:
- Make the closed mobile/tablet sidebar transform rule
!importantso it can’t be overridden by the later desktop default inmain.css. - Apply the same cascade fix to both published CSS copies that are tracked in the repo.
- Add explanatory inline CSS comments documenting the cascade rationale.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| docs/assets/css/mobile-responsive.css | Ensures the closed sidebar stays off-canvas on ≤1024px by making the closed-state transform !important. |
| ai-testing-strategy-book/docs/assets/css/mobile-responsive.css | Mirrors the same closed-state !important transform fix in the second published CSS copy. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
ootakazuhiko
deleted the
codex/ai-testing-issue168-sidebar-overlap-20260607
branch
Summary
!importantso the later desktop.book-sidebar { transform: translateX(0); }rule inmain.csscannot override itContext: itdojp/it-engineer-knowledge-architecture#168
Verification
npm cinpm run lint:lightnpm run check-conflictscd docs && BUNDLE_PATH=/home/devuser/work/CodeX/booksB/.codex-local/tmp/ai-testing-bundle-path BUNDLE_APP_CONFIG=/home/devuser/work/CodeX/booksB/.codex-local/tmp/ai-testing-bundle-config bundle exec jekyll buildnpm run buildgit diff --checkbooks=1 pages=10 ok=10 warn=0 fail=0/and/chapters/chapter-01-ai-driven-development/at 480/768/820/1024/1280 confirmed the closed drawer is off-canvas on <=1024px, the toggle opens it, and desktop layout remains visibleNotes
npm cireports existing dependency audit findings; this PR does not change dependencies.npm run buildregenerates broaddocs/content and.github/workflows/build.yml; those generated artifacts were not included because this PR is scoped to the published CSS fix.