Merge pull request #613 from SVG-Edit/issues/612

#612 Bottom toolbar has some visual issues

src/editor/components/seExplorerButton.js

@@ -48,10 +48,12 @@ template.innerHTML = `
   .button-icon {
   }
   .menu {
-    position: 'fixed';
+    position: fixed;
     margin-left: 34px;
     background: none !important;
     display:none;
+    top: 30%;
+    left: 171px;
   }
   .image-lib {
     position: fixed;

src/editor/components/seFlyingButton.js

@@ -262,6 +262,9 @@ export class FlyingButton extends HTMLElement {
           this.removeAttribute('opened');
         } else {
           this.setAttribute('opened', 'opened');
+          // In case menu scroll on top or bottom position based popup position set
+          const rect = this.getBoundingClientRect();
+          this.$menu.style.top = rect.top + "px";
         }
         break;
       default:

src/editor/components/seSpinInput.js

@@ -8,6 +8,9 @@ template.innerHTML = `
     margin: 5px 1px;
     padding: 3px;
   }
+  div.imginside {
+    width: var(--global-se-spin-input-width);
+  }
   img {
     position: relative;
     right: -4px;
@@ -58,6 +61,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 +87,7 @@ export class SESpinInput extends HTMLElement {
     case 'src':
       this.$img.setAttribute('src', newValue);
       this.$label.remove();
+      this.$div.classList.add('imginside');
       break;
     case 'size':
       // access to the underlying input box

src/editor/svgedit.css

@@ -8,6 +8,7 @@
   --icon-bg-color: #72797A;
   --icon-bg-color-hover: #2B3C45;
   --input-color: #B2B2B2;
+  --global-se-spin-input-width: 82px;
 }
 
 .svg_editor * {
@@ -314,9 +315,14 @@ hr {
 
 #tools_bottom {
   grid-area: bottom;
-  overflow: scroll;
+  overflow: auto;
   display: flex;
   align-items: center;
+  scrollbar-width: thin;
+}
+
+#tools_bottom ::-webkit-scrollbar {
+  width: 3px;
 }
 
 #tools_bottom se-list {
@@ -329,7 +335,12 @@ hr {
 #tools_left {
   grid-area: left;
   border-right: none;
-  overflow-y: scroll;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+/* width */
+#tools_left ::-webkit-scrollbar {
+  width: 3px;
 }
 
 /*—————————————————————————————*/
@@ -578,4 +589,6 @@ ul li.current {
 
 .dropdown li.tool_button {
   width: 24px;
-}
+}
+
+