Fix: Resizable Panels — Drag-Overlay verhindert Text-Selektion

- Unsichtbares Fullscreen-Overlay während Drag fängt alle Maus-Events
- document.body.style.userSelect blockiert sofort bei mousedown
- Bestehende Selektion wird beim Drag-Start gelöscht
- Handle 5px breit + unsichtbarer 15px Greifbereich (::before)
- Visueller Grip-Indikator beim Hover

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/routes/+page.svelte

@@ -24,7 +24,6 @@
 
 	// ============ Resizable Panels ============
 
-	// Breiten in Pixel (werden zu fr umgerechnet)
 	let panelWidths = [220, 400, 400, 380];
 	let container: HTMLDivElement;
 	let dragging: number | null = null;
@@ -32,10 +31,9 @@
 	let startWidths: number[] = [];
 
 	function getGridTemplate(): string {
-		// 4 Panels + 3 Handles dazwischen: panel handle panel handle panel handle panel
 		return panelWidths.map((w, i) => {
 			if (i < panelWidths.length - 1) {
-				return `${w}px 3px`;
+				return `${w}px 5px`;
 			}
 			return `${w}px`;
 		}).join(' ');
@@ -43,17 +41,30 @@
 
 	function onMouseDown(index: number, event: MouseEvent) {
 		event.preventDefault();
+		event.stopPropagation();
+
 		dragging = index;
 		startX = event.clientX;
 		startWidths = [...panelWidths];
+
+		// Sofort Text-Selektion blockieren auf dem ganzen Dokument
+		document.body.style.userSelect = 'none';
+		document.body.style.webkitUserSelect = 'none';
+		document.body.style.cursor = 'col-resize';
+
+		// Bestehende Selektion löschen
+		window.getSelection()?.removeAllRanges();
+
 		window.addEventListener('mousemove', onMouseMove);
 		window.addEventListener('mouseup', onMouseUp);
 	}
 
 	function onMouseMove(event: MouseEvent) {
 		if (dragging === null) return;
+		event.preventDefault();
+
 		const dx = event.clientX - startX;
-		const minWidth = 120;
+		const minWidth = 100;
 
 		const leftIdx = dragging;
 		const rightIdx = dragging + 1;
@@ -61,7 +72,6 @@
 		let newLeft = startWidths[leftIdx] + dx;
 		let newRight = startWidths[rightIdx] - dx;
 
-		// Mindestbreiten einhalten
 		if (newLeft < minWidth) {
 			newRight -= (minWidth - newLeft);
 			newLeft = minWidth;
@@ -73,22 +83,26 @@
 
 		panelWidths[leftIdx] = Math.max(minWidth, newLeft);
 		panelWidths[rightIdx] = Math.max(minWidth, newRight);
-		panelWidths = panelWidths; // Svelte reactivity
+		panelWidths = panelWidths;
 	}
 
 	function onMouseUp() {
 		dragging = null;
+
+		// Selektion wieder erlauben
+		document.body.style.userSelect = '';
+		document.body.style.webkitUserSelect = '';
+		document.body.style.cursor = '';
+
 		window.removeEventListener('mousemove', onMouseMove);
 		window.removeEventListener('mouseup', onMouseUp);
 
-		// Breiten in localStorage speichern
 		try {
 			localStorage.setItem('panel-widths', JSON.stringify(panelWidths));
 		} catch {}
 	}
 
 	onMount(() => {
-		// Gespeicherte Breiten laden
 		try {
 			const saved = localStorage.getItem('panel-widths');
 			if (saved) {
@@ -99,10 +113,10 @@
 			}
 		} catch {}
 
-		// Initiale Breiten an Fenster anpassen wenn zu breit
+		// Breiten an Fenster anpassen
 		if (container) {
 			const total = panelWidths.reduce((a, b) => a + b, 0);
-			const available = container.clientWidth - 9; // 3 Handles à 3px
+			const available = container.clientWidth - 15; // 3 Handles à 5px
 			if (total > available) {
 				const scale = available / total;
 				panelWidths = panelWidths.map(w => Math.round(w * scale));
@@ -118,21 +132,23 @@
 	style="grid-template-columns: {getGridTemplate()}"
 >
 	<!-- Session-Sidebar -->
-	<aside class="panel panel-sessions">
+	<aside class="panel">
 		<SessionList />
 	</aside>
 
-	<div class="resize-handle" on:mousedown={(e) => onMouseDown(0, e)} role="separator" aria-orientation="vertical"></div>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="handle" on:mousedown={(e) => onMouseDown(0, e)}><div class="handle-grip"></div></div>
 
 	<!-- Chat -->
-	<section class="panel panel-chat">
+	<section class="panel">
 		<ChatPanel />
 	</section>
 
-	<div class="resize-handle" on:mousedown={(e) => onMouseDown(1, e)} role="separator" aria-orientation="vertical"></div>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="handle" on:mousedown={(e) => onMouseDown(1, e)}><div class="handle-grip"></div></div>
 
 	<!-- Aktivität / Memory / Audit -->
-	<section class="panel panel-activity">
+	<section class="panel">
 		<div class="panel-tabs">
 			{#each middleTabs as tab}
 				<button
@@ -155,10 +171,11 @@
 		</div>
 	</section>
 
-	<div class="resize-handle" on:mousedown={(e) => onMouseDown(2, e)} role="separator" aria-orientation="vertical"></div>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="handle" on:mousedown={(e) => onMouseDown(2, e)}><div class="handle-grip"></div></div>
 
 	<!-- Agents / Guard-Rails -->
-	<section class="panel panel-details">
+	<section class="panel">
 		<div class="panel-tabs">
 			{#each rightTabs as tab}
 				<button
@@ -180,17 +197,19 @@
 	</section>
 </div>
 
+<!-- Unsichtbares Overlay während Drag — fängt alle Maus-Events ab -->
+{#if dragging !== null}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="drag-overlay" on:mousemove={onMouseMove} on:mouseup={onMouseUp}></div>
+{/if}
+
 <style>
 	.panels {
 		display: grid;
 		gap: 0;
 		height: 100%;
 		background: var(--bg-primary);
-	}
+		position: relative;
-
-	.panels.dragging {
-		cursor: col-resize;
-		user-select: none;
 	}
 
 	.panel {
@@ -201,20 +220,53 @@
 		min-width: 0;
 	}
 
-	/* Resize Handle */
+	/* Resize Handle — 5px breit, mit unsichtbarem 15px Greifbereich */
-	.resize-handle {
+	.handle {
-		width: 3px;
+		width: 5px;
 		cursor: col-resize;
 		background: var(--border);
-		transition: background 0.15s ease;
+		position: relative;
 		z-index: 10;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
-	.resize-handle:hover,
+	.handle::before {
-	.panels.dragging .resize-handle {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: -5px;
+		right: -5px;
+		z-index: 11;
+	}
+
+	.handle:hover {
 		background: var(--accent);
 	}
 
+	.handle-grip {
+		width: 1px;
+		height: 30px;
+		background: var(--text-secondary);
+		border-radius: 1px;
+		opacity: 0;
+		transition: opacity 0.15s;
+	}
+
+	.handle:hover .handle-grip {
+		opacity: 0.6;
+	}
+
+	/* Drag-Overlay — ganzer Bildschirm, unsichtbar, fängt Maus-Events */
+	.drag-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 9999;
+		cursor: col-resize;
+	}
+
 	/* Tabs */
 	.panel-tabs {
 		display: flex;