Autosize preset buttons final.

1 files changed, 39 insertions, 32 deletions

diff --git a/src/ui/ui.js b/src/ui/ui.js
index 286d95c..e367f74 100644
--- a/src/ui/ui.js
+++ b/src/ui/ui.js
@@ -215,38 +215,6 @@ var UI = (() => {
         }
 
 
-        if (!document.getElementById("presets-sizer")) {
-          // adapt button to label if needed
-          let sizer = table.cloneNode(true);
-          sizer.id = "presets-sizer";
-          document.body.appendChild(sizer);
-          let presetWidth = sizer.querySelector("input.preset").offsetWidth;
-          let labelWidth = 0;
-          for (let l of sizer.querySelectorAll("label.preset")) {
-            let lw = l.offsetWidth;
-            debug("lw", l.textContent, lw);
-            if (lw > labelWidth) labelWidth = lw;
-          }
-
-          debug(`Preset: %s Label: %s`, presetWidth, labelWidth);
-          labelWidth += 16;
-          if (presetWidth < labelWidth) {
-            for (let ss of document.styleSheets) {
-              if (ss.href.endsWith("/ui.css")) {
-                for (let r of ss.cssRules) {
-                  if (/input\.preset:checked.*min-width:/.test(r.cssText)) {
-                    r.style.minWidth = (labelWidth) + "px";
-                    break;
-                  }
-                }
-              }
-            }
-          }
-
-          sizer.style.visibility = "visible";
-          // setTimeout( () => sizer.style.display = "none");
-        }
-
       }
 
       // URL
@@ -278,6 +246,44 @@ var UI = (() => {
       return row;
     }
 
+    correctSize() {
+      if (!(UI.mobile || document.getElementById("presets-sizer"))) {
+        // adapt button to label if needed
+        let presets = document.querySelector(".presets");
+        let sizer = document.createElement("div");
+        sizer.id = "presets-sizer";
+        sizer.appendChild(presets.cloneNode(true));
+        document.body.appendChild(sizer);
+        setTimeout(async () => {
+          let presetWidth = sizer.querySelector("input.preset").offsetWidth;
+          let labelWidth = 0;
+          for (let l of sizer.querySelectorAll("label.preset")) {
+            let lw = l.offsetWidth;
+            debug("lw", l.textContent, lw);
+            if (lw > labelWidth) labelWidth = lw;
+          }
+
+          debug(`Preset: %s Label: %s`, presetWidth, labelWidth);
+          labelWidth += 16;
+          if (presetWidth < labelWidth) {
+            for (let ss of document.styleSheets) {
+              if (ss.href.endsWith("/ui.css")) {
+                for (let r of ss.cssRules) {
+                  if (/input\.preset:checked.*min-width:/.test(r.cssText)) {
+                    r.style.minWidth = (labelWidth) + "px";
+                    break;
+                  }
+                }
+              }
+            }
+          }
+
+          sizer.style.display = "none";
+
+        }, 100);
+      }
+    }
+
     allSiteRows() {
       return this.table.querySelectorAll("tr.site");
     }
@@ -440,6 +446,7 @@ var UI = (() => {
         root.addEventListener("change", this, true);
         root.wiredBy = this;
       }
+      this.correctSize();
       return root;
     }