#612 Bottom toolbar has some visual issues

src/editor/components/seExplorerButton.js

@@ -48,7 +48,7 @@ template.innerHTML = `
   .button-icon {
   }
   .menu {
-    position: 'fixed';
+    position: fixed;
     margin-left: 34px;
     background: none !important;
     display:none;

src/editor/components/seSpinInput.js

@@ -58,6 +58,7 @@ export class SESpinInput extends HTMLElement {
     this._shadowRoot = this.attachShadow({ mode: 'open' });
     this._shadowRoot.append(template.content.cloneNode(true));
     // locate the component
+    this.$div = this._shadowRoot.querySelector('div');
     this.$img = this._shadowRoot.querySelector('img');
     this.$label = this.shadowRoot.getElementById('label');
     this.$event = new CustomEvent('change');
@@ -83,6 +84,7 @@ export class SESpinInput extends HTMLElement {
     case 'src':
       this.$img.setAttribute('src', newValue);
       this.$label.remove();
+      this.$div.style.width = '82px';
       break;
     case 'size':
       // access to the underlying input box

src/editor/svgedit.css

@@ -314,7 +314,7 @@ hr {
 
 #tools_bottom {
   grid-area: bottom;
-  overflow: scroll;
+  overflow: auto;
   display: flex;
   align-items: center;
 }
@@ -329,7 +329,7 @@ hr {
 #tools_left {
   grid-area: left;
   border-right: none;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 /*—————————————————————————————*/
@@ -583,4 +583,9 @@ ul li.current {
 
 .dropdown li.tool_button {
   width: 24px;
-}
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 3px;
+}