From 463b55cafa85a935ecdc825bbaa5880f5d8346d1 Mon Sep 17 00:00:00 2001
From: hackademix <giorgio@maone.net>
Date: Sat, 16 Apr 2022 00:03:17 +0200
Subject: [PATCH] Improved preset sizing.

---
 src/ui/ui.css | 13 +++++++------
 src/ui/ui.js  | 17 +++++++++++------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/ui/ui.css b/src/ui/ui.css
index d21e7f5..baf1811 100644
--- a/src/ui/ui.css
+++ b/src/ui/ui.css
@@ -328,17 +328,17 @@ span.preset {
   width: 5000px;
   height: 500px;
   top: -5000px;
+
 }
 
 #presets-sizer span.preset {
   display: block;
-
 }
 
 .presets input.preset:checked, #presets input.preset, #presets-sizer input.preset {
   opacity: 1;
   transform: none;
-  min-width: calc(var(--preset-label-width) + var(--line-size) + var(--extra-preset-width));
+  min-width: calc(var(--preset-label-width) + var(--line-size) * 1.5 + var(--extra-preset-width));
 }
 
 .presets input.preset:focus {
@@ -362,7 +362,7 @@ span.preset {
   padding: .05em 0.4em .05em 0;
   --line-scaled: var(--line-size);
   line-height: var(--line-scaled);
-  padding-left: calc(var(--line-scaled) * 1.5);
+  padding-left: calc(var(--line-scaled) * 1.4);
 }
 
 .presets input.preset[value^="T"] + label {
@@ -372,7 +372,7 @@ span.preset {
 .presets input.preset:checked + label, #presets .presets label {
   opacity: 1;
   display: inline-flex;
-  width: 75%;
+  width: var(--preset-label-width);
   background-color: var(--form-color2);
   border-radius: 1em 1em 0 0;
 }
@@ -391,10 +391,11 @@ span.preset {
 }
 
 #presets-sizer .presets label {
-   position: static;
-   display: block;
+   position: absolute;
+   display: inline;
    width: auto;
    overflow: visible;
+   padding: 0;
 }
 
 input.preset[value="T_TRUSTED"] {
diff --git a/src/ui/ui.js b/src/ui/ui.js
index cbdd850..e3dc828 100644
--- a/src/ui/ui.js
+++ b/src/ui/ui.js
@@ -418,7 +418,7 @@ var UI = (() => {
           presets.appendChild(clone);
         }
 
-        UI.Sites.correctSize(presets);
+        this.correctSize(presets);
       }
 
       // URL
@@ -450,21 +450,26 @@ var UI = (() => {
       return row;
     }
 
-    static correctSize(presets) {
+    correctSize(presets) {
+      if (this.sizeCorrected) return;
+      this.sizeCorrected = true;
       // adapt button to label if needed
       let sizer = document.createElement("div");
       sizer.id = "presets-sizer";
+      sizer.classList.add("sites");
       sizer.appendChild(presets.cloneNode(true));
       document.body.appendChild(sizer);
-      let presetWidth = sizer.querySelector("input.preset").offsetWidth;
       let labelWidth = 0;
+      let biggest = "";
       for (let l of sizer.querySelectorAll("label.preset")) {
         let lw = l.offsetWidth;
-        if (lw > labelWidth) labelWidth = lw;
+        if (lw > labelWidth) {
+          labelWidth = lw;
+          biggest = l.textContent;
+        }
       }
-      document.documentElement.style.setProperty("--preset-label-width", (labelWidth) + "px");
+      this.parentNode.style.setProperty("--preset-label-width", (labelWidth) + "px");
       sizer.remove();
-      UI.Sites.correctSize = () => {}; // just once, please!
     }
 
     allSiteRows() {