From b73b24ebb1b40cf8bdb577b3642bf2ae0fcde16e Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sat, 12 Sep 2020 08:26:44 -0400
Subject: [PATCH] Fix slider's responsiveness to layout changes

Related commit:
- https://github.com/gorhill/uBlock/commit/f01bda11595d1ea8b79373e9b4ccf10b1eb8c3db
---
 src/css/epicker-ui.css |  5 ++++-
 src/js/epicker-ui.js   | 10 ++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css
index 1f38c93cc..04474b956 100644
--- a/src/css/epicker-ui.css
+++ b/src/css/epicker-ui.css
@@ -122,7 +122,7 @@ html#ublock0-epicker,
     border: 0;
     pointer-events: auto;
     position: relative;
-    width: 32%;
+    width: 40%;
     }
 .resultsetModifier > span {
     align-items: center;
@@ -136,12 +136,14 @@ html#ublock0-epicker,
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
     display: inline-block;
+    flex-shrink: 0;
     height: 6px;
     }
 .resultsetModifier  > span > span:nth-of-type(2) {
     background-color: var(--checkbox-checked-ink);
     border-radius: 7px;
     display: inline-block;
+    flex-shrink: 0;
     height: 16px;
     width: 16px;
     }
@@ -150,6 +152,7 @@ html#ublock0-epicker,
     border-top-right-radius: 2px;
     border-bottom-right-radius: 2px;
     display: inline-block;
+    flex-grow: 1;
     height: 4px;
     }
 .resultsetModifier input {
diff --git a/src/js/epicker-ui.js b/src/js/epicker-ui.js
index 4e519a280..d062574c0 100644
--- a/src/js/epicker-ui.js
+++ b/src/js/epicker-ui.js
@@ -91,12 +91,10 @@ const renderRange = function(id, value, invert = false) {
     const slider = $stor(`#${id} > span`);
     const lside = slider.children[0];
     const thumb = slider.children[1];
-    const rside = slider.children[2];
-    const thumbWidth = thumb.offsetWidth;
-    const sliderWidth = slider.offsetWidth - thumbWidth;
-    const x = value * sliderWidth / max;
-    lside.style.width = `${x}px`;
-    rside.style.width = `${sliderWidth - x}px`;
+    const sliderWidth = slider.offsetWidth;
+    const maxPercent = (sliderWidth - thumb.offsetWidth) / sliderWidth * 100;
+    const widthPercent = value / max * maxPercent;
+    lside.style.width = `${widthPercent}%`;
 };
 
 /******************************************************************************/