From ee0d9c881e7249520c1c440d05d7027301d64273 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.fritz.box>
Date: Tue, 24 Mar 2026 08:20:04 +0100
Subject: [PATCH] fix: column resize handle now accessible above add/delete
 buttons

Resize handle: wider (9px), z-40 (above z-30 buttons).
Add-column button moved to bottom-right corner to avoid overlap.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 admin-lehrer/components/grid-editor/GridTable.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/admin-lehrer/components/grid-editor/GridTable.tsx b/admin-lehrer/components/grid-editor/GridTable.tsx
index 22f0561..02b32f4 100644
--- a/admin-lehrer/components/grid-editor/GridTable.tsx
+++ b/admin-lehrer/components/grid-editor/GridTable.tsx
@@ -296,25 +296,25 @@ export function GridTable({
                 x
               </button>
             )}
-            {/* Add column button (visible on hover, after this column) */}
+            {/* Add column button — small icon at bottom-right, below resize handle */}
             {onAddColumn && (
               <button
-                className="absolute -right-[7px] top-0 w-[14px] h-full flex items-center justify-center text-teal-500 opacity-0 group-hover/colhdr:opacity-100 transition-opacity z-30 hover:bg-teal-100 dark:hover:bg-teal-900/40 rounded"
+                className="absolute -right-[7px] -bottom-[7px] w-[14px] h-[14px] flex items-center justify-center text-teal-500 opacity-0 group-hover/colhdr:opacity-100 transition-opacity z-30 hover:bg-teal-100 dark:hover:bg-teal-900/40 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
                 onClick={(e) => {
                   e.stopPropagation()
                   onAddColumn(zone.zone_index, col.index)
                 }}
                 title={`Spalte nach "${col.label}" einfuegen`}
               >
-                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <svg className="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                   <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
                 </svg>
               </button>
             )}
-            {/* Right-edge resize handle */}
+            {/* Right-edge resize handle — wide grab area, highest z-index */}
             {ci < numCols - 1 && (
               <div
-                className="absolute top-0 right-0 w-[5px] h-full cursor-col-resize hover:bg-teal-400/40 z-20"
+                className="absolute top-0 -right-[4px] w-[9px] h-full cursor-col-resize hover:bg-teal-400/40 z-40"
                 onMouseDown={(e) => {
                   e.stopPropagation()
                   handleColResizeStart(ci, e.clientX)