#612 width hardcode change to width attribute and define a global css variable --se-spin-input-width

src/editor/components/seSpinInput.js

@@ -8,6 +8,10 @@ template.innerHTML = `
     margin: 5px 1px;
     padding: 3px;
   }
+  div.imginside {
+    --se-spin-input-width: var(--global-se-spin-input-width);
+    width: var(--se-spin-input-width);
+  }
   img {
     position: relative;
     right: -4px;
@@ -69,7 +73,7 @@ export class SESpinInput extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step' ];
+    return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step', 'width' ];
   }
   /**
    * @function attributeChangedCallback
@@ -84,7 +88,10 @@ export class SESpinInput extends HTMLElement {
     case 'src':
       this.$img.setAttribute('src', newValue);
       this.$label.remove();
-      this.$div.style.width = '82px';
+      break;
+    case 'width':
+      this.$div.classList.add('imginside');
+      this.$div.style.setProperty('--se-spin-input-width', newValue + 'px');
       break;
     case 'size':
       // access to the underlying input box

src/editor/panels/BottomPanel.js

@@ -216,7 +216,7 @@ class BottomPanel {
               height="22px"></img></se-list-item>
         </se-list>
         <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="${i18next.t('properties.opacity')}"
-          src="${imgPath}/opacity.svg"></se-spin-input>
+          src="${imgPath}/opacity.svg" width="82"></se-spin-input>
         <se-palette id="palette"></se-palette>
       </div>
     `;

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 * {