From 77b41ac3ec72b7b78f8de121d769fcdc727118b4 Mon Sep 17 00:00:00 2001
From: AviPeltz <aj.peltz@gmail.com>
Date: Tue, 16 Dec 2025 15:31:35 -0800
Subject: [PATCH 1/2] fix(desktop): constrain change view sidebar and file item
 widths
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add max-w-[320px] to sidebar container and max-w-[160px] to file names
to prevent unconstrained growth and ensure proper truncation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../Sidebar/ChangesView/components/FileItem/FileItem.tsx        | 2 +-
 .../screens/main/components/WorkspaceView/Sidebar/index.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
index 6f1bdc4862d..e2c81686406 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
@@ -75,7 +75,7 @@ export function FileItem({
 				<span className={cn("shrink-0 flex items-center", statusBadgeColor)}>
 					{statusIndicator}
 				</span>
-				<span className="flex-1 min-w-0 text-xs text-start truncate overflow-hidden text-ellipsis">
+				<span className="flex-1 min-w-0 max-w-[160px] text-xs text-start truncate overflow-hidden text-ellipsis">
 					{fileName}
 				</span>
 
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx
index 7511587610a..522add89042 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx
@@ -10,7 +10,7 @@ export function Sidebar() {
 	const modes: SidebarMode[] = [SidebarMode.Tabs, SidebarMode.Changes];
 
 	return (
-		<aside className="h-full flex flex-col overflow-hidden">
+		<aside className="h-full flex flex-col overflow-hidden max-w-[320px]">
 			<ModeCarousel
 				modes={modes}
 				currentMode={currentMode}

From fdcca854645f8d9c191c3c77b4131423168c7606 Mon Sep 17 00:00:00 2001
From: AviPeltz <aj.peltz@gmail.com>
Date: Tue, 16 Dec 2025 15:54:02 -0800
Subject: [PATCH 2/2] added more fixes to diff sidebar

---
 .../components/FileItem/FileItem.tsx          | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
index e2c81686406..aec5b129ca8 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
@@ -58,7 +58,7 @@ export function FileItem({
 	return (
 		<div
 			className={cn(
-				"group w-full flex items-stretch gap-1.5 px-2 text-left rounded-sm",
+				"group w-full flex items-stretch gap-1.5 px-1 text-left rounded-sm",
 				"hover:bg-accent/50 cursor-pointer transition-colors overflow-hidden",
 				isSelected && "bg-accent",
 			)}
@@ -75,24 +75,25 @@ export function FileItem({
 				<span className={cn("shrink-0 flex items-center", statusBadgeColor)}>
 					{statusIndicator}
 				</span>
-				<span className="flex-1 min-w-0 max-w-[160px] text-xs text-start truncate overflow-hidden text-ellipsis">
-					{fileName}
+				<span className="flex-1 min-w-0 flex items-center gap-1">
+					<span className="max-w-[130px] xl:max-w-[150px] text-xs text-start truncate overflow-hidden text-ellipsis">
+						{fileName}
+					</span>
+					{showStatsDisplay && (
+						<span className="flex items-center gap-0.5 text-xs font-mono shrink-0 whitespace-nowrap">
+							{file.additions > 0 && (
+								<span className="text-green-600 dark:text-green-400">
+									+{file.additions}
+								</span>
+							)}
+							{file.deletions > 0 && (
+								<span className="text-red-600 dark:text-red-400">
+									-{file.deletions}
+								</span>
+							)}
+						</span>
+					)}
 				</span>
-
-				{showStatsDisplay && (
-					<div className="flex items-center gap-0.5 text-xs font-mono shrink-0 whitespace-nowrap">
-						{file.additions > 0 && (
-							<span className="text-green-600 dark:text-green-400">
-								+{file.additions}
-							</span>
-						)}
-						{file.deletions > 0 && (
-							<span className="text-red-600 dark:text-red-400">
-								-{file.deletions}
-							</span>
-						)}
-					</div>
-				)}
 			</button>
 
 			{hasAction && (