diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index 30b7c3067..78d0242d2 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -164,6 +164,7 @@
 					</div>
 				</aside>
 				<ResizeHandle
+					class={treeToggled === null ? "hidden sm:flex" : "flex"}
 					bind:width={treeWidth}
 					bind:resizing
 					min={TREE_MIN_WIDTH}
diff --git a/web/src/lib/components/ui/ResizeHandle.svelte b/web/src/lib/components/ui/ResizeHandle.svelte
index 8aab9a2b3..d692838be 100644
--- a/web/src/lib/components/ui/ResizeHandle.svelte
+++ b/web/src/lib/components/ui/ResizeHandle.svelte
@@ -9,6 +9,7 @@
 		side: "before" | "after";
 		resizing?: boolean;
 		"aria-label"?: string;
+		class?: string;
 	}
 
 	let {
@@ -18,7 +19,8 @@
 		resetTo,
 		side,
 		resizing = $bindable(false),
-		"aria-label": ariaLabel
+		"aria-label": ariaLabel,
+		class: className
 	}: Props = $props();
 
 	const clamp = (value: number) => Math.min(max ?? Infinity, Math.max(min, value));
@@ -53,7 +55,7 @@
 	aria-valuemax={max}
 	aria-label={ariaLabel}
 	data-resizing={resizing || undefined}
-	class="group hit-area-x-1 z-10 -mx-1 flex w-2 shrink-0 cursor-ew-resize touch-none justify-center transition-colors duration-150"
+	class="group hit-area-x-1 z-10 -mx-1 flex w-2 shrink-0 cursor-ew-resize touch-none justify-center transition-colors duration-150 {className}"
 	onpointerdown={startResize}
 	ondblclick={() => {
 		if (resetTo !== undefined) width = resetTo;