Repository navigation
feat(sidebar): adjustable sidebar width with min/max clamp (fixes #38) - #45
Merged
charandeep-reddy merged 1 commit intoAug 20, 2026
Conversation
|
@webdevsamran is attempting to deploy a commit to the charan Team on Vercel. A member of the Team first needs to authorize it. |
charandeep-reddy
approved these changes
Aug 20, 2026
charandeep-reddy
left a comment
charandeep-reddy
left a comment
Owner
There was a problem hiding this comment.
Verified locally — typecheck, lint, and the new tests all pass on the branch. Clean implementation, matches the existing sidebar-collapse pattern well. Two minor follow-ups (drag not canceling if the mouseup happens outside the window, and no keyboard resize) — merging and will patch those directly.
charandeep-reddy
added a commit
that referenced
this pull request
Aug 20, 2026
…a full-height bar The full-height colored rail from #45 read as a second border rather than a control. The hit target stays full-height for an easy grab, but now only a small centered pill is ever painted — transparent at rest, tinted on hover, solid while dragging. Also cancels the drag if the window loses focus mid-drag (alt-tab, an OS dialog stealing the mouseup) instead of leaving it to self-heal on whatever the next unrelated click in the window happens to be, and drops the now-dead lg:w-0 class the inline width style already covers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #38
Implements a draggable resize handle on the sidebar so users can adjust its width between a configurable minimum and maximum.
Changes
New files
src/lib/sidebar-width.ts– Constants (DEFAULT_SIDEBAR_WIDTH = 270,MIN_SIDEBAR_WIDTH = 220,MAX_SIDEBAR_WIDTH = 420) and pure helpersclampSidebarWidthandparseSidebarWidth.src/components/sidebar/use-sidebar-width.ts–useStoredSidebarWidth()hook built onuseSyncExternalStore+ the existinglocal-storagehelpers so the stored value is SSR-safe and updates reactively across tabs.setStoredSidebarWidth()companion setter.tests/sidebar-width.test.ts– Unit tests covering clamping, default fallback, NaN/Infinity/non-numeric strings.Modified
src/components/sidebar/sidebar.tsxw-[270px]with a dynamicwidthderived fromuseStoredSidebarWidth().dragWidthlocal state (null when idle) so there is no extra render cycle on mouse-up; the persisted value takes over immediately viauseSyncExternalStore.divwithrole="separator"is positioned absolutely on the right edge, visible only onlg:breakpoint, withcursor-col-resizeand hover/active accent tints.0mswhile dragging so the sidebar tracks the cursor frame-perfectly.Testing
bun run test— 40 test files, 390 passed, 1 skipped (pre-existing)bun run typecheck— Types generated successfully, no errorsbun run lint— No warnings or errors