Store sidebar width relative to container

[chribjel]

• Persist resizable sidebar width as a fraction of its parent
• Reapply stored width on window and container resizes

What Changed

Diff sidebar width is now stored as a fraction instead of a fixed width

Why

When switching between monitor sizes the diff bar is very unmanageable.

UI Changes

before:
https://github.com/user-attachments/assets/899eee18-96f3-407c-971e-2ecf3efb2a3e

after:
https://github.com/user-attachments/assets/de740f72-6fb0-4d71-a972-7170284b6ea1

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Localized UI persistence and resize behavior in the shared sidebar component; no auth, data, or API impact. Legacy pixel prefs are dropped until the user resizes once.

Overview
Resizable sidebar width in sidebar.tsx is persisted as a fraction of the sidebar wrapper’s parent width (or viewport fallback) instead of a fixed pixel value, so the panel scales when monitors or layout containers change size.

On drag end, storage uses a new { unit: "fraction", value } shape validated by SidebarStoredWidthSchema. Restore recomputes pixel width from that fraction, still clamped to min/max, and onResize runs after apply.

Re-application no longer runs only on mount: a shared applyStoredWidth runs on initial load, window resize, and a ResizeObserver on the parent element, keeping --sidebar-width in sync when the basis changes.

Legacy plain numeric localStorage entries still parse but are ignored for width restore (getStoredSidebarWidth returns null); users re-save on the next resize.

^{Reviewed by Cursor Bugbot for commit ce3f903. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Store sidebar width as a fraction of its container width

• The SidebarRail component in sidebar.tsx now saves width as a fraction of the wrapper's parent element width instead of an absolute pixel value.
• On load and during window or container resize events, the stored fraction is converted back to pixels, clamped, and applied via the CSS width variable.
• A ResizeObserver on the parent element and a window resize listener both trigger recomputation, keeping the sidebar proportionally sized as the container changes.
• Behavioral Change: previously stored absolute widths (bare numbers) are ignored on load; only the new fraction-based format is restored.

^{Macroscope summarized ce3f903.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 16fd3ac9-ed51-41a1-900e-e89cc4d4c687

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

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

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit ce3f903. Configure here.}

[cursor]

Legacy stored widths ignored

Medium Severity

SidebarStoredWidthSchema still accepts legacy numeric pixel values from localStorage, but getStoredSidebarWidth returns null for numbers so applyStoredWidth never restores them. Existing saved sidebar widths are silently dropped until the user drags the rail again.

 

^{Reviewed by Cursor Bugbot for commit ce3f903. Configure here.}

[cursor]

Resize reapplies stale storage

Medium Severity

While the user is dragging the sidebar rail, window resize and the parent ResizeObserver call applyStoredWidth, which reads the last persisted fraction from localStorage—not the in-progress drag width—and sets --sidebar-width. That can snap the sidebar back mid-drag when the window or container resizes.

 

^{Reviewed by Cursor Bugbot for commit ce3f903. Configure here.}

[macroscopeapp]

Approvability

Verdict: Needs human review

Two unresolved medium-severity issues exist: legacy localStorage values are silently ignored (breaking backward compatibility), and resize events can snap the sidebar mid-drag. These bugs should be addressed before merging.

^{You can customize Macroscope's approvability policy. Learn more.}