From b863611daa2a25e6ee94443ff395ff3267f48481 Mon Sep 17 00:00:00 2001
From: vegard <vnotnes@pm.me>
Date: Thu, 19 Mar 2026 05:42:34 +0000
Subject: [PATCH] BlockShell: fiks resize-handles + visuell affordance
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

overflow: hidden på .blockshell klippet resize-handles (negative offsets).
Endret til overflow: visible, border-radius på header/content i stedet.
Lagt til subtile visulle indikatorer ved hover: L-merker på hjørner,
tynne linjer på kanter. Hardkodede farger → CSS custom properties.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/blockshell/BlockShell.svelte   | 74 +++++++++++++++++--
 1 file changed, 67 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/blockshell/BlockShell.svelte b/frontend/src/lib/components/blockshell/BlockShell.svelte
index 415a61d..e0341c7 100644
--- a/frontend/src/lib/components/blockshell/BlockShell.svelte
+++ b/frontend/src/lib/components/blockshell/BlockShell.svelte
@@ -448,12 +448,11 @@
 		position: relative;
 		display: flex;
 		flex-direction: column;
-		background: #1c1c20;
-		border: 1px solid #2a2a2e;
+		background: var(--color-surface, #1c1c20);
+		border: 1px solid var(--color-border, #2a2a2e);
 		border-radius: 8px;
 		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-		overflow: hidden;
-		contain: layout;
+		overflow: visible;
 	}
 
 	.blockshell-fullscreen {
@@ -464,7 +463,7 @@
 		height: 100% !important;
 		border-radius: 0;
 		border: none;
-		background: #0a0a0b;
+		background: var(--color-bg, #0a0a0b);
 	}
 
 	.blockshell-minimized {
@@ -503,12 +502,13 @@
 		justify-content: space-between;
 		gap: 8px;
 		padding: 6px 8px 6px 12px;
-		border-bottom: 1px solid #f3f4f6;
+		border-bottom: 1px solid var(--color-border, #2a2a2e);
 		cursor: grab;
 		user-select: none;
 		flex-shrink: 0;
 		min-height: 36px;
-		background: #141416;
+		background: var(--color-bg, #141416);
+		border-radius: 8px 8px 0 0;
 	}
 
 	.blockshell-dragging .blockshell-header {
@@ -574,6 +574,7 @@
 		flex: 1;
 		overflow: auto;
 		min-height: 0;
+		border-radius: 0 0 8px 8px;
 	}
 
 	.blockshell-empty {
@@ -619,6 +620,65 @@
 		z-index: 5;
 	}
 
+	/* Visual affordance on hover — edge lines */
+	.blockshell:hover .blockshell-resize-e::after,
+	.blockshell:hover .blockshell-resize-w::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 2px;
+		height: 20px;
+		background: rgba(138, 138, 150, 0.3);
+		border-radius: 1px;
+	}
+	.blockshell:hover .blockshell-resize-e::after { right: 1px; }
+	.blockshell:hover .blockshell-resize-w::after { left: 1px; }
+
+	.blockshell:hover .blockshell-resize-n::after,
+	.blockshell:hover .blockshell-resize-s::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		height: 2px;
+		width: 20px;
+		background: rgba(138, 138, 150, 0.3);
+		border-radius: 1px;
+	}
+	.blockshell:hover .blockshell-resize-n::after { top: 1px; }
+	.blockshell:hover .blockshell-resize-s::after { bottom: 1px; }
+
+	/* Visual affordance on hover — corner L-marks */
+	.blockshell:hover .blockshell-resize-se::after,
+	.blockshell:hover .blockshell-resize-sw::after,
+	.blockshell:hover .blockshell-resize-ne::after,
+	.blockshell:hover .blockshell-resize-nw::after {
+		content: '';
+		position: absolute;
+		width: 8px;
+		height: 8px;
+		border-color: rgba(138, 138, 150, 0.4);
+		border-style: solid;
+		border-width: 0;
+	}
+	.blockshell:hover .blockshell-resize-se::after {
+		bottom: 1px; right: 1px;
+		border-right-width: 2px; border-bottom-width: 2px;
+	}
+	.blockshell:hover .blockshell-resize-sw::after {
+		bottom: 1px; left: 1px;
+		border-left-width: 2px; border-bottom-width: 2px;
+	}
+	.blockshell:hover .blockshell-resize-ne::after {
+		top: 1px; right: 1px;
+		border-right-width: 2px; border-top-width: 2px;
+	}
+	.blockshell:hover .blockshell-resize-nw::after {
+		top: 1px; left: 1px;
+		border-left-width: 2px; border-top-width: 2px;
+	}
+
 	/* Edge handles */
 	.blockshell-resize-n {
 		top: -3px;