From ca76bf315c3a3a40c78f7e085e8f66e49bf3cc5d Mon Sep 17 00:00:00 2001
From: Claude <claude@ctl.de>
Date: Sat, 20 Jun 2026 11:54:19 +0200
Subject: [PATCH] Move drag handle to top center edge of widget card

- Move drag handle out of widgetHeader into widgetCard directly so it
  sits at the top edge of the card, centered horizontally
- Style as a small tab (36x14px bar) protruding from the top border
- Always visible in edit mode for all widget types
- Remove old inline-flex overrides that conflicted with the new layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/globals.css        | 38 ++++++++++++++++++++------------------
 src/app/page.tsx           | 12 ++++++------
 src/app/widget-density.css |  5 +----
 3 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 54b66d3..8a59870 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2719,7 +2719,12 @@ button:disabled {
   z-index: 20 !important;
 }
 
-.widgetCard.widgetEditing .widgetDragHandle,
+.widgetCard.widgetEditing .widgetDragHandle {
+  display: grid !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
 .widgetCard.widgetEditing .widgetMenu {
   display: inline-flex !important;
   visibility: visible !important;
@@ -2805,7 +2810,6 @@ button:disabled {
   align-self: center !important;
 }
 
-.widgetCard.widgetEditing .widgetDragHandle,
 .widgetCard.widgetEditing .widgetMenuButton {
   height: 32px !important;
   min-height: 32px !important;
@@ -2858,7 +2862,6 @@ button:disabled {
 .widgetCard.widgetEditing .widgetTitle,
 .widgetCard.widgetEditing .widgetTitle h2,
 .widgetCard.widgetEditing .widgetTitleInput,
-.widgetCard.widgetEditing .widgetDragHandle,
 .widgetCard.widgetEditing .widgetMenu,
 .widgetCard.widgetEditing .widgetMenuButton {
   height: 30px !important;
@@ -2866,7 +2869,6 @@ button:disabled {
   align-self: center !important;
 }
 
-.widgetCard.widgetEditing .widgetDragHandle,
 .widgetCard.widgetEditing .widgetMenuButton {
   padding: 0 9px !important;
   display: inline-flex !important;
@@ -3112,29 +3114,30 @@ button:disabled {
   line-height: 24px !important;
 }
 
-/* Griff statt großer Ziehen-Button */
+/* Drag-Handle: zentriert am oberen Rand des Widget-Cards */
 .widgetDragHandle {
   position: absolute !important;
-  top: 5px !important;
+  top: -6px !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   z-index: 80 !important;
-  width: 20px !important;
-  height: 22px !important;
+  width: 36px !important;
+  height: 14px !important;
   display: grid !important;
   place-items: center !important;
   padding: 0 !important;
   color: var(--muted) !important;
-  background: transparent !important;
-  border: 0 !important;
-  border-radius: 8px !important;
+  background: var(--surface-strong) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 0 0 7px 7px !important;
   cursor: grab !important;
   user-select: none !important;
   touch-action: none !important;
 }
 
 .widgetDragHandle:hover {
-  background: color-mix(in srgb, var(--accent-soft) 38%, transparent) !important;
+  background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface-strong)) !important;
+  border-color: var(--accent) !important;
   color: var(--accent) !important;
 }
 
@@ -3143,13 +3146,12 @@ button:disabled {
 }
 
 .widgetDragGrip {
-  width: 13px !important;
-  height: 17px !important;
+  width: 18px !important;
+  height: 4px !important;
   display: block !important;
-  opacity: 0.72 !important;
-  background-image: radial-gradient(currentColor 1.3px, transparent 1.4px) !important;
-  background-size: 6px 6px !important;
-  background-position: 0 0 !important;
+  opacity: 0.6 !important;
+  background: currentColor !important;
+  border-radius: 2px !important;
 }
 
 /* Menü aus dem Layoutfluss nehmen */
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0d2244f..4a5e733 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1350,13 +1350,13 @@ export default function DashboardPage() {
           } as CSSProperties
         }
       >
-        <div className="widgetHeader">
-          {editMode ? (
-            <span className="widgetDragHandle" title="Widget ziehen" aria-label="Widget ziehen">
-              <span className="widgetDragGrip" aria-hidden="true" />
-            </span>
-          ) : null}
+        {editMode ? (
+          <span className="widgetDragHandle" title="Widget ziehen" aria-label="Widget ziehen">
+            <span className="widgetDragGrip" aria-hidden="true" />
+          </span>
+        ) : null}
 
+        <div className="widgetHeader">
           {typedWidget.type === "clock" || typedWidget.type === "search" ? null : (
             <div className="widgetTitle">{renderWidgetTitle(typedWidget)}</div>
           )}
diff --git a/src/app/widget-density.css b/src/app/widget-density.css
index e673877..3fd3546 100644
--- a/src/app/widget-density.css
+++ b/src/app/widget-density.css
@@ -21,7 +21,6 @@
 }
 
 .app .widgetCard.widgetEditing .widgetHeader {
-  padding-left: 31px !important;
   padding-right: 32px !important;
 }
 
@@ -77,11 +76,9 @@
 
 /* Griff und Menü kleiner */
 .app .widgetDragHandle {
-  top: 2px !important;
+  top: -6px !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
-  width: 20px !important;
-  height: 20px !important;
 }
 
 .app .widgetMenu {