From e53756c6a34b8a0240c4071cfc6465e6cbd83066 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 10 Sep 2026 00:19:25 +0200
Subject: [PATCH] web/components/ui: let the resize handle take a class

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/DiffView.svelte   | 1 +
 web/src/lib/components/ui/ResizeHandle.svelte | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

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;
-- 
2.51.2