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 {