Fix: Reduce sidebar width to improve content area alignment

[SouparnaChatterjee]

Fixes #709

Changes done:

• Overrode .side-bar width from 15.5rem/16.5rem to 11rem in _sass/custom/custom.scss for both medium (50rem) and large (66.5rem) breakpoints.
• Updated .main margin-left values to match the new sidebar width at both breakpoints, preventing content overlap.

Screenshots

Before: Sidebar consumed excessive horizontal space, leaving less room for main content.

After: Sidebar is more compact, main content area is wider and better utilizes screen space.

✅️ By submitting this PR, I have verified the following

• Checked to see if a similar PR has already been opened 🤔️
• Reviewed the contributing guidelines 🔍️
• Sample preview link added (add after checks complete)
• Tried Squashing the commits into one

Summary by CodeRabbit

Release Notes

• Style
  • Added a new wide-screen breakpoint to enforce consistent sidebar width for stable layout.
  • Adjusted main content margin to track the sidebar sizing so content stays aligned across larger viewports.

[coderabbitai]

Warning

Review limit reached

@SouparnaChatterjee, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 14 minutes and 36 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: aa359612-c72c-4d81-996e-7295e6dc0924

📥 Commits

Reviewing files that changed from the base of the PR and between 906ec8f and 8022c05.

📒 Files selected for processing (1)

• _sass/custom/custom.scss

Walkthrough

Adds a new @media (min-width: 66.5rem) rule in _sass/custom/custom.scss that sets .side-bar { min-width: 11rem; width: calc(...) } and updates .main { margin-left: max(11rem, ...) } so the main content aligns with the computed sidebar width at the new breakpoint.

Possibly related PRs

• CircuitVerse/Interactive-Book#794: Also modifies _sass/custom/custom.scss sidebar/nav styling; this PR changes .nav-list-expander cursor behavior while the current PR adjusts .side-bar width and .main margin-left at a large breakpoint.

Suggested labels

potential-ai-slop

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR addresses the primary objective from issue #709 (reducing sidebar width), but does not implement the secondary coding requirements.	Implement improvements to sidebar hover/interaction feedback and ensure CircuitVerse branding remains visible when sidebar is hidden.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main change in the PR—reducing sidebar width to improve content area alignment.
Out of Scope Changes check	✅ Passed	The changes are limited to sidebar width adjustments in the SCSS file and remain within the scope of issue #709.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

_sass/custom/custom.scss (1)

320-329: ⚡ Quick win

Consider combining duplicate media queries for the same breakpoint.

A @media (min-width: 50rem) block already exists at lines 246-273. Combining the sidebar/main rules into that existing block would improve maintainability and reduce duplication.

♻️ Consolidate into existing media query

Move lines 322-328 into the existing @media (min-width: 50rem) block at line 246, and remove the duplicate wrapper:

At line 246, the block would become:

 `@media` (min-width: 50rem) {
+  // Fix: reduce sidebar width and fix alignment (Issue `#709`)
+  .side-bar {
+    width: 11rem;
+  }
+
+  .main {
+    margin-left: 11rem;
+  }
+
   // Sidebar Navigation
   .site-nav {
     padding-left: 2rem;

Then remove lines 320-329 from their current location.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 315e5d23-61d3-4c20-b1ff-425ff6843f2c

📥 Commits

Reviewing files that changed from the base of the PR and between c3be3db and cc79627.

📒 Files selected for processing (2)

• _includes/components/nav.html
• _sass/custom/custom.scss

[Me-Priyank]

@Nihal4777 LGTM