feat(CSS): Make draggable blocks resizable

2 files changed, 10 insertions, 5 deletions

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 2da2376..876d980 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -145,14 +145,18 @@
       position: absolute;
       width: fit-content;
       max-height: 50vh;
+      max-width: 25vw;
       overflow: scroll;
       border: solid gray;
       padding: 0.3rem;
       padding-top: 0.5rem;
       padding-bottom: 0;
+      resize: both;
 
-      * {
-        max-width: calc(100vw/4);
+      &[style*="height"],
+      &[style*="width"] {
+        max-height: unset;
+        max-width: unset;
       }
 
       .map-container {
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index e19e2d9..922f413 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -375,12 +375,13 @@ export const generateMaps = async (container) => {
       let x = 0;
       let y = 0;
       htmlHolder.blocks.forEach(block =>{
+        // Add draggable instance
         block.draggableInstance = new PlainDraggable(block, {
           handle: block.draggablePart,
           snap: { x: { step: 20 }, y: { step: 20 } },
           autoScroll: false,
         })
-        // block.style.transform = `translate(${x}px, ${y}px)`
+        // Set initial postion side by side
         block.style.left = `${x}px`
         block.style.top = `${y}px`
         x += parseInt(window.getComputedStyle(block).width) + 50
@@ -391,9 +392,9 @@ export const generateMaps = async (container) => {
       })
     } else {
       htmlHolder.blocks.forEach(block => {
-        block.style.transform = 'none'
+        block.removeAttribute('style')
         try {
-          block.draggableInstance?.remove()
+          block.draggableInstance.remove()
         } catch (_) { }
       })
     }