Simplify layout using grid (#7)

* Various style fix WIP

* Removing pin wrapper WIP

* Restore pin wrapper

* WIP

* Several style fixes

* Fix dropdown resizing

* Minor style adjustment, dorpdown bug fix

* Pins sizing

* Additional tests and style fixes

* More size tests and fixes

* More robust styling

* Small format fix

js/template/pin/DropdownTemplate.js

@@ -13,24 +13,42 @@ export default class DropdownTemplate extends ITemplate {
     /** @type {HTMLSelectElement} */
     #selectElement
 
+    /** @type {HTMLSelectElement} */
+    #referenceSelectElement
+
+    #changeHandler = e => this.element.selectedOption = /** @type {HTMLSelectElement} */(e.target)
+        .selectedOptions[0]
+        .value
+
     render() {
         return html`
-            <select class="ueb-pin-input-content">
+            <select class="ueb-pin-input-content" @change="${this.#changeHandler}">
                 ${this.element.options.map(([k, v]) => html`
-                    <option value="${k}" ?selected="${k === this.element.selected}">${v}</option>
+                    <option value="${k}" ?selected="${k === this.element.selectedOption}">${v}</option>
                 `)}
             </select>
+            <select style="visibility: hidden; position: fixed;">
+                <option>${this.element.selectedOption}</option>
+            </select>
         `
     }
 
     /** @param {PropertyValues} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
-        this.#selectElement = this.element.querySelector("select")
+        this.#selectElement = this.element.querySelector("select:first-child")
+        this.#referenceSelectElement = this.element.querySelector("select:last-child")
         const event = new Event("input", { bubbles: true })
         this.#selectElement.dispatchEvent(event)
     }
 
+    /** @param {PropertyValues} changedProperties */
+    updated(changedProperties) {
+        super.updated(changedProperties)
+        const bounding = this.#referenceSelectElement.getBoundingClientRect()
+        this.element.style.setProperty("--ueb-dropdown-width", bounding.width + "px")
+    }
+
     createInputObjects() {
         return [
             ...super.createInputObjects(),