Fix input wrappin for multiple inputs

js/template/pin/BoolPinTemplate.js

@@ -37,7 +37,7 @@ export default class BoolPinTemplate extends PinTemplate {
 
     renderInput() {
         return html`
-            <input type="checkbox" class="ueb-pin-input" ?checked="${this.element.defaultValue}" />
+            <input type="checkbox" class="ueb-pin-input-wrapper ueb-pin-input" ?checked="${this.element.defaultValue}" />
         `
     }
 }

js/template/pin/EnumPinTemplate.js

@@ -56,7 +56,7 @@ export default class EnumPinTemplate extends IInputPinTemplate {
         const entity = this.element.nodeElement.entity
         return html`
             <ueb-dropdown
-                class="ueb-pin-input"
+                class="ueb-pin-input-wrapper ueb-pin-input"
                 .options="${this.#dropdownEntries}"
                 .selected="${this.element.defaultValue.value}"
             >

js/template/pin/IInputPinTemplate.js

@@ -15,6 +15,12 @@ export default class IInputPinTemplate extends PinTemplate {
     static selectOnFocus = true
     static saveEachInputChange = false // Otherwise save only on focus out
 
+    /** @type {HTMLElement} */
+    #inputWrapper
+    get inputWrapper() {
+        return this.#inputWrapper
+    }
+
     /** @type {HTMLElement[]} */
     #inputContentElements
 
@@ -37,8 +43,7 @@ export default class IInputPinTemplate extends PinTemplate {
 
     /** @param {HTMLElement}  inputElement*/
     #updateWrapClass(inputElement) {
-        const width = Math.round(this.blueprint.scaleCorrect(inputElement.getBoundingClientRect().width))
-            + Math.round(this.nameWidth)
+        const width = this.blueprint.scaleCorrect(this.#inputWrapper.getBoundingClientRect().width) + this.nameWidth
         const inputWrapped = this.element.classList.contains("ueb-pin-input-wrap")
         if (!inputWrapped && width > Configuration.pinInputWrapWidth) {
             this.element.classList.add("ueb-pin-input-wrap")
@@ -56,6 +61,7 @@ export default class IInputPinTemplate extends PinTemplate {
                 this.element.querySelector(".ueb-pin-name").getBoundingClientRect().width
             )
         }
+        this.#inputWrapper = this.element.querySelector(".ueb-pin-input-wrapper")
         this.#inputContentElements = /** @type {HTMLElement[]} */([...this.element.querySelectorAll("ueb-input")])
     }
 
@@ -116,7 +122,7 @@ export default class IInputPinTemplate extends PinTemplate {
         const singleLine = Self.singleLineInput
         const selectOnFocus = Self.selectOnFocus
         return html`
-            <div class="ueb-pin-input">
+            <div class="ueb-pin-input-wrapper ueb-pin-input">
                 <ueb-input .singleLine="${singleLine}" .selectOnFocus="${selectOnFocus}"
                     .innerText="${IInputPinTemplate.stringFromUEToInput(this.element.getDefaultValue()?.toString() ?? "")}">
                 </ueb-input>

js/template/pin/IntPinTemplate.js

@@ -14,7 +14,7 @@ export default class IntPinTemplate extends INumericPinTemplate {
 
     renderInput() {
         return html`
-            <div class="ueb-pin-input">
+            <div class="ueb-pin-input-wrapper ueb-pin-input">
                 <ueb-input .singleLine="${true}" .innerText="${this.element.getDefaultValue()?.toString() ?? "0"}">
                 </ueb-input>
             </div>

js/template/pin/LinearColorPinTemplate.js

@@ -48,7 +48,7 @@ export default class LinearColorPinTemplate extends PinTemplate {
 
     renderInput() {
         return html`
-            <span class="ueb-pin-input" data-linear-color="${this.element.getDefaultValue()?.toString() ?? nothing}"
+            <span class="ueb-pin-input-wrapper ueb-pin-input" data-linear-color="${this.element.getDefaultValue()?.toString() ?? nothing}"
                 @click="${this.#launchColorPickerWindow}"
                 style="--ueb-linear-color: rgba(${this.element.getDefaultValue()?.toString() ?? nothing})">
             </span>

js/template/pin/RealPinTemplate.js

@@ -14,7 +14,7 @@ export default class RealPinTemplate extends INumericPinTemplate {
 
     renderInput() {
         return html`
-            <div class="ueb-pin-input">
+            <div class="ueb-pin-input-wrapper ueb-pin-input">
                 <ueb-input .singleLine="${true}"
                     .innerText="${Utility.minDecimals(this.element.getDefaultValue() ?? 0)}">
                 </ueb-input>