From b5ee544b0926e7323f9a2e6dcf5467243d9501c2 Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Wed, 11 Aug 2021 10:16:23 +0200
Subject: [PATCH] palette using flex

---
 src/editor/components/sePalette.js | 33 ++----------------------------
 src/editor/svgedit.css             | 18 ++--------------
 2 files changed, 4 insertions(+), 47 deletions(-)

diff --git a/src/editor/components/sePalette.js b/src/editor/components/sePalette.js
index 91260091..5c6ecf31 100644
--- a/src/editor/components/sePalette.js
+++ b/src/editor/components/sePalette.js
@@ -24,10 +24,7 @@ template.innerHTML = `
   }
   #palette_holder {
     overflow: hidden;
-    padding: 5px;
-    position: absolute;
-    right: 15px;
-    height: 16px;
+    padding: 4px;
     background: #f0f0f0;
     border-radius: 3px;
     z-index: 2;
@@ -48,33 +45,7 @@ template.innerHTML = `
   div.palette_item:first-child {
     background: white;
   }
-  @media screen and (max-width:1100px) {
-    #palette_holder {
-      left: 410px;
-      overflow-x: scroll;
-      padding: 0 5px;
-      margin-top: 2px;
-      height: 22px;
-    }
-  } 
-  @media screen and (max-width:1250px) {
-    #palette_holder {
-      left: 560px;
-      overflow-x: scroll;
-      padding: 0 5px;
-      margin-top: 2px;
-      height: 22px;
-    }
-  }
-  @media screen and (max-width:540px) {
-    #palette_holder {
-      left: 0px;
-      overflow-x: scroll;
-      padding: 0 5px;
-      margin-top: 32px;
-      height: 22px;
-    }
-  }   
+  
   </style>
   <div id="palette_holder" title="">
     <div id="js-se-palette">
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index f0ac8acb..94e22ac1 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -333,25 +333,11 @@ hr {
 
 #tools_bottom {
   grid-area: bottom;
-  overflow: visible;
-}
-
-#tools_bottom * {
-  float: left;
-  margin-right: 2px;
-}
-
-#tools_bottom se-spin-input {
-  float: left;
-  vertical-align: middle;
+  overflow: scroll;
   display: flex;
   align-items: center;
 }
 
-#tools_bottom elix-dropdown-list {
-  width: 22px;
-}
-
 /*—————————————————————————————*/
 
 #tools_left {
@@ -543,7 +529,7 @@ input[type=text] {
 }
 
 #palette {
-  float: right;
+  margin-left:auto;
 }
 
 #stroke_expand {