feat: vendored Gridstack for drag and free grid resize

1 files changed, 14 insertions, 23 deletions

diff --git a/static/deck.css b/static/deck.css
index 200a651..d6b62dc 100644
--- a/static/deck.css
+++ b/static/deck.css
@@ -11,21 +11,17 @@ body {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 #grid {
-  height: 100dvh;
   padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  grid-auto-rows: minmax(0, auto);
-  align-content: start;
-  overflow-y: auto;
 }
 
+.grid-stack { min-height: 100dvh; }
+
 .panel {
   background: var(--udt-surface0);
   border: 1px solid var(--udt-surface1);
@@ -35,30 +31,25 @@ body {
   min-width: 0;
 }
 
-.panel { position: relative; }
-.panel.wide { grid-column: span 2; }
-@media (max-width: 620px) { .panel.wide { grid-column: auto; } }
-.panel.dragging { opacity: .6; outline: 2px dashed var(--udt-accent); }
+.grid-stack-item-content.panel { position: absolute; }
 
 .panel-head { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
-.panel .panel-head h2 { margin: 0; flex: 1; }
-.panel-head button {
+.panel .panel-head h2 {
+  margin: 0;
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--udt-subtext0);
+}
+.panel-drag {
   font: inherit;
   color: var(--udt-overlay0);
   background: transparent;
   border: 0;
   padding: 2px 8px;
-  cursor: pointer;
+  cursor: grab;
   touch-action: none;
 }
-.drag-handle { cursor: grab; }
-
-.panel h2 {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--udt-subtext0);
-  margin-bottom: 12px;
-}
 
 .num {
   font-family: "Inconsolata Nerd Font Mono", ui-monospace, monospace;