Autosize preset buttons final.

2 files changed, 47 insertions, 39 deletions

diff --git a/src/ui/ui.css b/src/ui/ui.css
index 96f7179..b27597f 100644
--- a/src/ui/ui.css
+++ b/src/ui/ui.css
@@ -199,17 +199,18 @@ input.preset:active, input.preset:focus, input.preset:hover {
 
 #presets-sizer {
   visibility: hidden;
-
-  overflow: hidden !important;
-  border: 1px solid red;
+  position: absolute;
+  display: block;
+  width: 5000px;
+  height: 500px;
+  top: -5000px;
 }
 
-#presets-sizer td.site {
-  display: none;
-}
-#presets-sizer span.url {
+#presets-sizer span.preset {
   display: block;
+
 }
+
 .presets input.preset:checked, #presets input.preset, #presets-sizer input.preset {
   opacity: 1;
   transform: none;
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;
     }