From feab19913bf5f1a37047684524375f18af785463 Mon Sep 17 00:00:00 2001
From: Yao Changyi <89594808+yang-summer@users.noreply.github.com>
Date: Wed, 11 Mar 2026 05:58:56 +0800
Subject: [PATCH] feat: Allow sidebar button list to scroll internally on
 overflow (#2791)

---
 .../builder/$resumeId/-components/edge.tsx    |  2 +-
 .../builder/$resumeId/-sidebar/left/index.tsx | 50 ++++++++++---------
 .../$resumeId/-sidebar/right/index.tsx        |  8 ++-
 src/styles/globals.css                        |  8 +++
 4 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/routes/builder/$resumeId/-components/edge.tsx b/src/routes/builder/$resumeId/-components/edge.tsx
index 1c3318aec..f9a4e34b9 100644
--- a/src/routes/builder/$resumeId/-components/edge.tsx
+++ b/src/routes/builder/$resumeId/-components/edge.tsx
@@ -9,7 +9,7 @@ export function BuilderSidebarEdge({ side, children }: Props) {
 	return (
 		<div
 			className={cn(
-				"absolute inset-y-0 hidden w-12 flex-col items-center justify-between bg-popover py-2.5 sm:flex",
+				"absolute inset-y-0 hidden min-h-0 w-12 flex-col items-center overflow-hidden bg-popover py-2.5 sm:flex",
 				side === "left" ? "inset-s-0 border-r" : "inset-e-0 border-l",
 			)}
 		>
diff --git a/src/routes/builder/$resumeId/-sidebar/left/index.tsx b/src/routes/builder/$resumeId/-sidebar/left/index.tsx
index 4436e0fcf..b62313edf 100644
--- a/src/routes/builder/$resumeId/-sidebar/left/index.tsx
+++ b/src/routes/builder/$resumeId/-sidebar/left/index.tsx
@@ -88,32 +88,34 @@ function SidebarEdge({ scrollAreaRef }: SidebarEdgeProps) {
 
 	return (
 		<BuilderSidebarEdge side="left">
-			<div />
+			<div className="flex min-h-0 w-full flex-1 flex-col items-center gap-y-2 overflow-hidden">
+				<div className="no-scrollbar min-h-0 w-full flex-1 overflow-y-auto overflow-x-hidden">
+					<div className="flex min-h-full flex-col items-center justify-center gap-y-2">
+						{leftSidebarSections.map((section) => (
+							<Button
+								key={section}
+								size="icon"
+								variant="ghost"
+								title={getSectionTitle(section)}
+								onClick={() => scrollToSection(section)}
+							>
+								{getSectionIcon(section)}
+							</Button>
+						))}
+					</div>
+				</div>
 
-			<div className="flex flex-col justify-center gap-y-2">
-				{leftSidebarSections.map((section) => (
-					<Button
-						key={section}
-						size="icon"
-						variant="ghost"
-						title={getSectionTitle(section)}
-						onClick={() => scrollToSection(section)}
-					>
-						{getSectionIcon(section)}
-					</Button>
-				))}
+				<UserDropdownMenu>
+					{({ session }) => (
+						<Button size="icon" variant="ghost">
+							<Avatar className="size-6">
+								<AvatarImage src={session.user.image ?? undefined} />
+								<AvatarFallback className="text-[0.5rem]">{getInitials(session.user.name)}</AvatarFallback>
+							</Avatar>
+						</Button>
+					)}
+				</UserDropdownMenu>
 			</div>
-
-			<UserDropdownMenu>
-				{({ session }) => (
-					<Button size="icon" variant="ghost">
-						<Avatar className="size-6">
-							<AvatarImage src={session.user.image ?? undefined} />
-							<AvatarFallback className="text-[0.5rem]">{getInitials(session.user.name)}</AvatarFallback>
-						</Avatar>
-					</Button>
-				)}
-			</UserDropdownMenu>
 		</BuilderSidebarEdge>
 	);
 }
diff --git a/src/routes/builder/$resumeId/-sidebar/right/index.tsx b/src/routes/builder/$resumeId/-sidebar/right/index.tsx
index bb260a3a7..8158021bf 100644
--- a/src/routes/builder/$resumeId/-sidebar/right/index.tsx
+++ b/src/routes/builder/$resumeId/-sidebar/right/index.tsx
@@ -83,9 +83,8 @@ function SidebarEdge({ scrollAreaRef }: SidebarEdgeProps) {
 
 	return (
 		<BuilderSidebarEdge side="right">
-			<div />
-
-			<div className="flex flex-col justify-center gap-y-2">
+			<div className="no-scrollbar min-h-0 w-full flex-1 overflow-y-auto overflow-x-hidden">
+				<div className="flex min-h-full flex-col items-center justify-center gap-y-2">
 				{rightSidebarSections.map((section) => (
 					<Button
 						key={section}
@@ -98,8 +97,7 @@ function SidebarEdge({ scrollAreaRef }: SidebarEdgeProps) {
 					</Button>
 				))}
 			</div>
-
-			<div />
+			</div>
 		</BuilderSidebarEdge>
 	);
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a6e5be3ab..36b57ae1f 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -131,6 +131,14 @@
 	aspect-ratio: 1 / 1.4142;
 }
 
+@utility no-scrollbar {
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
 @layer base {
 	* {
 		@apply border-border outline-ring/50 min-w-0;