fix: background position responsive

[0xLeopoldo]

Fix background position repsonsive

ISSUE #CHA-338 https://linear.app/defi-wonderland/issue/CHA-338/ui-fixes

Summary by CodeRabbit

• New Features

  • Added a modal disclaimer dialog accessible via a new "Disclaimer" button in the navbar.
  • Introduced sidebar expand and collapse buttons for improved navigation on desktop.
  • Enhanced navigation experience by ensuring category card clicks scroll the page to the top before navigating.

• Style

  • Unified the visual theme with a new accent color and updated font family across all UI elements.
  • Refined sidebar, dropdown, and code block styles for consistency and improved usability.
  • Updated category icons and improved responsive background effects.

• Bug Fixes

  • Fixed sidebar category collapsing behavior to remain expanded by default.

• Chores

  • Reformatted sidebar configuration for consistency and clarity.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
handbook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 4, 2025 7:24pm

[coderabbitai]

Caution

Review failed

Failed to post review comments.

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ae734a9 and ac3e471.

⛔ Files ignored due to path filters (10)

• sites/wonderland/static/img/OPlogo.svg is excluded by !**/*.svg
• sites/wonderland/static/img/azteclogo.svg is excluded by !**/*.svg
• sites/wonderland/static/img/elipse_background.svg is excluded by !**/*.svg
• sites/wonderland/static/img/icons/bug-ant.svg is excluded by !**/*.svg
• sites/wonderland/static/img/icons/chevron-down.svg is excluded by !**/*.svg
• sites/wonderland/static/img/icons/code-bracket-square.svg is excluded by !**/*.svg
• sites/wonderland/static/img/icons/information-circle.svg is excluded by !**/*.svg
• sites/wonderland/static/img/icons/key.svg is excluded by !**/*.svg
• sites/wonderland/static/img/icons/map.svg is excluded by !**/*.svg
• sites/wonderland/static/img/icons/sidebar.svg is excluded by !**/*.svg

📒 Files selected for processing (11)

• packages/common-config/preset/commonDocusaurusConfig.ts (2 hunks)
• packages/common-config/static/common/styles/global.css (28 hunks)
• sites/wonderland/docusaurus.config.ts (1 hunks)
• sites/wonderland/sidebars.ts (2 hunks)
• sites/wonderland/src/components/CategoryCards/index.tsx (1 hunks)
• sites/wonderland/src/css/local.css (1 hunks)
• sites/wonderland/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx (1 hunks)
• sites/wonderland/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css (1 hunks)
• sites/wonderland/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx (1 hunks)
• sites/wonderland/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css (1 hunks)
• sites/wonderland/src/theme/Root/index.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

sites/wonderland/sidebars.ts (1)

Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.

packages/common-config/preset/commonDocusaurusConfig.ts (1)

Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.

🔇 Additional comments (15)

packages/common-config/preset/commonDocusaurusConfig.ts (3)

87-93: LGTM - Prism configuration relocation.

Moving the prism configuration below the footer is a reasonable organizational change and doesn't affect functionality.

---

97-97: Good alignment with explicit sidebar configuration.

Disabling autoCollapseCategories aligns well with the explicit collapsible: false settings in the sidebar configuration, providing consistent behavior.

---

55-65: Validate and replace placeholder handbook URLs

The domains optimism-handbook.example.com and aztec-handbook.example.com do not resolve (no HTTP response on HEAD requests), indicating they’re placeholders. Please update them to point to the actual public handbook URLs.

• File: packages/common-config/preset/commonDocusaurusConfig.ts, lines 55–65

sites/wonderland/docusaurus.config.ts (1)

59-59: Good centralization of navbar configuration.

Emptying the navbar items array makes sense to rely on the common configuration for navbar items. The webpack-merge will properly handle merging the common config's navbar items with this empty array.

sites/wonderland/src/css/local.css (1)

7-23: Icon assets verified in new directory

All referenced SVGs are present under sites/wonderland/static/img/icons/, so the updated background-image paths will resolve correctly:

• sites/wonderland/static/img/icons/map.svg
• sites/wonderland/static/img/icons/code-bracket-square.svg
• sites/wonderland/static/img/icons/key.svg
• sites/wonderland/static/img/icons/bug-ant.svg

No further action required.

sites/wonderland/sidebars.ts (1)

1-261: LGTM - Good consistency improvements.

The formatting changes (single to double quotes) and explicit collapsible: false + collapsed: false settings improve code consistency and make the configuration intent clear. These changes align well with the autoCollapseCategories: false setting in the common config.

sites/wonderland/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css (3)

1-40: Well-structured responsive CSS with proper RTL support.

The media query, positioning, and transition implementations are solid. The RTL handling is particularly well done.

---

12-12: CSS Custom Properties Confirmed Defined

The variables --docusaurus-collapse-button-bg and --docusaurus-collapse-button-bg-hover are already defined in your theme:

• sites/wonderland/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css (under :root and [data-theme="dark"]:root)

No further action required.

---

25-25: Verified: wonderland-gray variables are defined in the theme

The CSS variables --wonderland-gray-100 and --wonderland-gray-400 (with matching fallback values) are declared in the global stylesheet:

• packages/common-config/static/common/styles/global.css:
  • --wonderland-gray-100: #eff1f5;
  • --wonderland-gray-400: #7d89b0;

sites/wonderland/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.tsx (1)

29-55: Excellent accessibility implementation with proper keyboard support.

The component correctly implements ARIA attributes, keyboard navigation, and localization. The structure is clean and follows React best practices.

sites/wonderland/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css (2)

1-9: Excellent CSS custom properties definition with theme support.

The root-level CSS variables with dark theme variants provide a solid foundation for theming. This addresses the custom properties used in the expand button styles.

---

11-47: Well-implemented responsive design with consistent patterns.

The sticky positioning, responsive behavior, and RTL support are well-executed. The styling patterns are consistent with the expand button, which provides a cohesive user experience.

sites/wonderland/src/theme/DocSidebar/Desktop/CollapseButton/index.tsx (1)

30-53: Consistent implementation with proper accessibility.

The component follows the same excellent patterns as the expand button, with proper accessibility, localization, and TypeScript usage.

packages/common-config/static/common/styles/global.css (2)

136-156: html {overflow:hidden} blocks native page scrolling & anchor navigation

overflow: hidden on the root element disables the browser’s default scroll container.
Although you later re-enable vertical scrolling on body, this breaks:

• in-page anchor links / hash navigation (the UA scrolls html, not body);
• browser built-in “Find in page” scroll‐to-match;
• programmatic .scrollIntoView() that targets non-body elements.

A safer pattern is to isolate the background effect while keeping the root scrollable:

-html {
-  background: var(--wonderland-dark);
-  overflow: hidden;
-  position: relative;
-}
+html {
+  background: var(--wonderland-dark);
+  overflow-x: hidden;      /* keep horizontal clipping only */
+  position: relative;
+}

(or move the decorative layer to body::before with pointer-events:none).
Please validate on long pages and anchor deep-links before shipping.

---

19-21: Nice touch introducing --wonderland-accent & re-using it in components

Centralising the accent colour through a custom prop simplifies future re-branding and guarantees palette consistency.

Also applies to: 77-78

📝 Walkthrough

Walkthrough

This set of changes introduces significant updates to the Docusaurus documentation site's configuration, styling, and component structure. The Docusaurus theme configuration is updated to relocate the prism syntax highlighting settings and add a detailed navbar configuration, while the sidebar's category auto-collapse is disabled. The global CSS is overhauled to introduce a new accent color and unify the font stack, with enhancements to sidebar, dropdown, and background styling. Several new React components are added for sidebar expand/collapse functionality, each with corresponding CSS modules. A modal disclaimer dialog is implemented and triggered by a navbar button. Sidebar and category icon paths are updated, and minor formatting changes are made to the sidebar configuration.

Possibly related PRs

• feat: theme update #47: Modifies commonDocusaurusConfig.ts by relocating prism settings and adding the same navbar configuration, indicating a direct code-level relationship.
• feat: monorepo common configuration #43: Introduces a shared Docusaurus config package, including prism settings and themeConfig updates; both PRs change commonDocusaurusConfig.ts, making them directly related.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.