Fix sidebar layout shift on Sistent page refresh

[Katotodan]

Description
Fixes a layout shift that occurs when refreshing pages under Sistent. The sidebar now maintains a fixed width during page load, preventing the content from shifting and ensuring a more stable layout.

Before

Screen.Recording.2026-08-07.at.18.36.40.mov

After

Screen.Recording.2026-08-07.at.19.07.10.mov

This PR fixes #7937

Notes for Reviewers

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Style
  • Improved table-of-contents layout consistency by setting a minimum width.
  • Reformatted grouped styling rules without changing their visual behavior.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Sistent table-of-contents wrapper now has a 15rem minimum width. Grouped CSS selectors are reformatted without changing their styling behavior.

Changes

TOC layout

Layer / File(s)	Summary
TOC wrapper sizing and selector formatting src/components/SistentNavigation/toc.style.js	TOCWrapper now has a 15rem minimum width. Grouped selectors are formatted across separate lines with no styling changes.

Estimated code review effort: 1 (Trivial) | ~2 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: fixing the Sistent sidebar layout shift during page refresh.
Linked Issues check	✅ Passed	The change adds a minimum width to the table-of-contents wrapper, which supports the fixed-width sidebar requirement in [#7937].
Out of Scope Changes check	✅ Passed	The changes are limited to the Sistent table-of-contents styling and related selector formatting, with no unrelated code changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/SistentNavigation/toc.style.js`:
- Line 10: Reset TOCWrapper’s min-width within the max-width: 750px mobile media
query by setting it to 0, while preserving the existing desktop width and mobile
auto-width behavior to prevent narrow-screen overflow.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: abbc9017-4685-4236-96b7-071facff892c

📥 Commits

Reviewing files that changed from the base of the PR and between 62830be and e556859.

📒 Files selected for processing (1)

• src/components/SistentNavigation/toc.style.js

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Reset the minimum width in the mobile layout.

TOCWrapper already has width: 15rem on Line 9, so this rule does not add a desktop width reservation. The max-width: 750px media query changes width to auto but leaves min-width: 15rem active. On narrow viewports, this can cause horizontal overflow together with margin-right: 3rem.

Add min-width: 0 in the mobile media query, or scope this rule to the desktop layout.

As per coding guidelines, the component must maintain responsive mobile-first behavior.

Proposed fix

 `@media` only screen and (max-width: 750px) {
   position: initial;
   margin-right: 3rem;
   width: auto;
+  min-width: 0;
 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/SistentNavigation/toc.style.js` at line 10, Reset TOCWrapper’s
min-width within the max-width: 750px mobile media query by setting it to 0,
while preserving the existing desktop width and mobile auto-width behavior to
prevent narrow-screen overflow.

Source: Coding guidelines

[Katotodan]

I have tested this on small devices, and everything was working correctly. The size set for small devices was superior to 15rem already so that prevents it from even shrinking in any unknown senario.

[coderabbitai]

@Katotodan, the tested devices validate the current layout at those viewport sizes.

The concern is limited to a narrower available content width. In the mobile media query, width: auto does not override min-width: 15rem. The wrapper can therefore not shrink below 15rem, regardless of the available width after margins.

If the supported mobile viewport and container widths always exceed that limit, the current rule is safe. Otherwise, reset min-width in the mobile media query to preserve the intended width: auto behavior.

(ᵕ•_•) 🐇

_{You are interacting with an AI system.}