palette using flex

src/editor/components/sePalette.js

@@ -24,10 +24,7 @@ template.innerHTML = `
   }
   #palette_holder {
     overflow: hidden;
-    padding: 5px;
+    padding: 4px;
-    position: absolute;
-    right: 15px;
-    height: 16px;
     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">

src/editor/svgedit.css

@@ -333,25 +333,11 @@ hr {
 
 #tools_bottom {
   grid-area: bottom;
-  overflow: visible;
+  overflow: scroll;
-}
-
-#tools_bottom * {
-  float: left;
-  margin-right: 2px;
-}
-
-#tools_bottom se-spin-input {
-  float: left;
-  vertical-align: middle;
   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 {