From 5f74238e0ee89cac909cd9d36b3c5dae023fd6bf Mon Sep 17 00:00:00 2001
From: epaper-dashboard <hermes@epaper-dashboard.local>
Date: Sat, 29 Aug 2026 17:06:26 +0400
Subject: [PATCH] fix: grid items position:relative to restore multi-cell spans

---
 templates/index.html | 26 +++++++-------------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index d9ab81e..ab7d1fe 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -356,17 +356,6 @@
       margin-bottom: 12px;
       min-height: 200px;
     }
-    /* ---- Grid Container ---- */
-    .grid-preview {
-      display: grid;
-      grid-template-columns: repeat({{ grid.cols }}, 1fr);
-      grid-template-rows: repeat({{ grid.rows }}, 120px);
-      gap: 6px;
-      background: var(--border);
-      padding: 6px;
-      border-radius: 8px;
-      margin-bottom: 12px;
-    }
 
     /* ---- Empty Cell (drop target) ---- */
     .grid-cell {
@@ -387,12 +376,7 @@
       outline-offset: -2px;
     }
 
-    /* ---- Occupied Cell: occupied items sit inside their origin cell ---- */
-    .grid-cell.occupied {
-      background: transparent;
-    }
-
-    /* ---- Grid Item: sits INSIDE its origin grid-cell ---- */
+    /* ---- Grid Item: positioned by CSS Grid (grid-column/grid-row spans) ---- */
     .grid-item {
       background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
       border: 1px solid var(--border-light);
@@ -402,13 +386,17 @@
       flex-direction: column;
       justify-content: space-between;
       overflow: visible;
-      position: absolute;
-      inset: 0;
+      position: relative;
       cursor: grab;
       user-select: none;
       transition: box-shadow 0.15s ease, border-color 0.15s ease;
       box-sizing: border-box;
     }
+
+    /* Occupied cells: item sits inside, cell background fades */
+    .grid-cell.occupied {
+      background: transparent;
+    }
     .grid-item:hover { border-color: var(--accent-bright); background: var(--surface-2); }
     .grid-item:active { cursor: grabbing; }
     .grid-item.dragging {