From e8a4b984f35b25d285f15ef5b422cd9d161bc4e9 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Fri, 3 Apr 2026 13:20:53 +0200
Subject: [PATCH] fix(ui): full-width draggable header bar on PageShell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Drag handle bar spans full width (not just the icon)
- Entire bar is draggable with grab cursor
- Subtle background color differentiates it from content (border-bottom)
- Hover/active states for visual feedback
- DotsSixVertical icon rotated 90° (horizontal grip lines)
- Dark mode support

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/page-carousel/PageShell.svelte | 44 +++++++++++++------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte b/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte
index 102343467..9f71043fe 100644
--- a/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte
+++ b/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte
@@ -113,8 +113,8 @@
 		? `height: ${heightPx}px; min-height: 0;`
 		: ''}"
 >
-	<div class="drag-handle-bar">
-		<span class="drag-handle" draggable="true"><DotsSixVertical size={14} /></span>
+	<div class="drag-handle-bar" draggable="true">
+		<span class="drag-handle-icon"><DotsSixVertical size={14} /></span>
 	</div>
 
 	<!-- Header -->
@@ -245,29 +245,45 @@
 	.drag-handle-bar {
 		display: flex;
 		justify-content: center;
-		padding: 0.25rem 0 0;
+		align-items: center;
+		padding: 0.375rem 0;
+		cursor: grab;
+		background: rgba(0, 0, 0, 0.02);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+		transition: background 0.15s;
 	}
-	.drag-handle {
+	.drag-handle-bar:hover {
+		background: rgba(0, 0, 0, 0.04);
+	}
+	.drag-handle-bar:active {
+		cursor: grabbing;
+		background: rgba(0, 0, 0, 0.06);
+	}
+	:global(.dark) .drag-handle-bar {
+		background: rgba(255, 255, 255, 0.02);
+		border-bottom-color: rgba(255, 255, 255, 0.04);
+	}
+	:global(.dark) .drag-handle-bar:hover {
+		background: rgba(255, 255, 255, 0.05);
+	}
+	:global(.dark) .drag-handle-bar:active {
+		background: rgba(255, 255, 255, 0.08);
+	}
+	.drag-handle-icon {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 32px;
-		height: 14px;
 		color: #d1d5db;
-		cursor: grab;
-		border-radius: 0.25rem;
+		transform: rotate(90deg);
 		transition: color 0.15s;
 	}
-	.drag-handle:hover {
+	.drag-handle-bar:hover .drag-handle-icon {
 		color: #9ca3af;
 	}
-	.drag-handle:active {
-		cursor: grabbing;
-	}
-	:global(.dark) .drag-handle {
+	:global(.dark) .drag-handle-icon {
 		color: #3f3b38;
 	}
-	:global(.dark) .drag-handle:hover {
+	:global(.dark) .drag-handle-bar:hover .drag-handle-icon {
 		color: #6b7280;
 	}