From 75f4a48fcbcbe000da6350c5a760ab6d4d25d271 Mon Sep 17 00:00:00 2001
From: xarmian <xarmian@gmail.com>
Date: Sat, 28 Mar 2026 11:51:05 -0400
Subject: [PATCH] fix: show peek of adjacent columns on mobile board view (#9)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Narrower columns (78vw from 85vw) with start-aligned snap and
horizontal padding so users can see adjacent columns peeking in
from the edges — clear visual affordance that horizontal scrolling
is available.
---
 web/src/lib/components/collections/BoardView.svelte |  8 ++++----
 web/src/lib/components/layout/Sidebar.svelte        | 11 +++++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/collections/BoardView.svelte b/web/src/lib/components/collections/BoardView.svelte
index 1197400d..97fc578c 100644
--- a/web/src/lib/components/collections/BoardView.svelte
+++ b/web/src/lib/components/collections/BoardView.svelte
@@ -444,13 +444,13 @@
 			scroll-behavior: smooth;
 			-webkit-overflow-scrolling: touch;
 			gap: var(--space-3);
-			padding-bottom: var(--space-3);
+			padding: 0 var(--space-4) var(--space-3);
 		}
 
 		.kanban-column {
-			min-width: 85vw;
-			max-width: 85vw;
-			scroll-snap-align: center;
+			min-width: 78vw;
+			max-width: 78vw;
+			scroll-snap-align: start;
 			flex-shrink: 0;
 		}
 	}
diff --git a/web/src/lib/components/layout/Sidebar.svelte b/web/src/lib/components/layout/Sidebar.svelte
index bcf59e8a..c0992038 100644
--- a/web/src/lib/components/layout/Sidebar.svelte
+++ b/web/src/lib/components/layout/Sidebar.svelte
@@ -167,12 +167,19 @@
 </script>
 
 <!-- Swipe from left edge to open (when sidebar is closed on mobile) -->
-<!-- Touch zone: 0-24px from left edge only — avoids conflicts with board horizontal scroll -->
+<!-- Touch zone: 0-16px from left edge only — skip if touch is inside a horizontally scrollable element -->
 <svelte:window
 	ontouchstart={(e) => {
 		if (!uiStore.isMobile || uiStore.sidebarOpen) return;
 		const x = e.touches[0].clientX;
-		if (x <= 24) {
+		if (x <= 16) {
+			// Don't activate if the touch is inside a horizontally scrollable container
+			// (e.g. board view with overflow-x: auto)
+			let el = e.target as HTMLElement | null;
+			while (el) {
+				if (el.scrollWidth > el.clientWidth + 1) return;
+				el = el.parentElement;
+			}
 			openSwipeStartX = x;
 			openSwipeStartY = e.touches[0].clientY;
 			openSwipeTracking = true;