chore(CSS): Improve layout of DumbyMap

2 files changed, 13 insertions, 6 deletions

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index a41cd57..e9d9dba 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -39,23 +39,21 @@
   /* height: 100vh; */
 
   .Showcase {
-    flex: 0;
+    order: 2;
     #mapPlaceholder {
       display: none;
     }
   }
 
   .SemanticHtml {
-    flex: 1;
+    order: 1;
     padding: 0.5rem;
     overflow-y: scroll;
 
     > .draggable-block {
       width: 100%;
-      position: relative;
       pointer-events: auto;
       border-radius: 0.5rem;
-      padding: 0.5rem;
       background-color: white;
       margin-bottom: 3rem;
 
@@ -145,14 +143,22 @@
       box-sizing: content-box;
       position: absolute;
       width: fit-content;
+      height: fill-available;
       max-height: 50vh;
       overflow: scroll;
       border: solid gray;
+      padding: 0.3rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0;
 
       * {
         max-width: calc(100vw/4);
       }
 
+      .map-container {
+        min-width: 200px;
+      }
+
       .draggable {
         width: 100%;
         display: block;
@@ -167,6 +173,7 @@
         transition: all 0.3s ease-out;
         &:hover {
           background-color: lightgray;
+          padding-top: 1em;
         }
       }
     }
diff --git a/src/css/index.css b/src/css/index.css
index 17a8dd1..49b3abb 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -15,7 +15,7 @@ body {
     padding: 0.5em;
 
     .DumbyMap {
-      order: 2;
+      order: 1;
       flex: 1 0 calc(50% - 0.5em);
       height: 100%;
       overflow-y: scroll;
@@ -25,7 +25,7 @@ body {
     .editor {
       display: block;
 
-      order: 1;
+      order: 2;
       flex: 1 0 50%;
       max-width: calc(50% - 0.5em);
       height: 100%;