From a16fe09d4275b64939d34f56b1720cb00ef1e93e Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 23 Apr 2020 10:58:00 +0100
Subject: [PATCH] Use em to detach slider from root font-size

---
 res/css/views/elements/_Slider.scss           | 22 +++++++++----------
 .../tabs/user/_AppearanceUserSettingsTab.scss |  1 +
 src/components/views/elements/Slider.tsx      |  2 +-
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
index 83f100ff92..f6982865db 100644
--- a/res/css/views/elements/_Slider.scss
+++ b/res/css/views/elements/_Slider.scss
@@ -30,30 +30,30 @@ limitations under the License.
     display: flex;
     box-sizing: border-box;
     position: absolute;
-    height: 1rem;
+    height: 1em;
     width: 100%;
-    padding: 0 0.5rem; // half the width of a dot.
+    padding: 0 0.5em; // half the width of a dot.
     align-items: center;
 }
 
 .mx_Slider_bar > hr {
     width: 100%;
-    border: 0.2rem solid $Slider-background-color;
+    border: 0.2em solid $Slider-background-color;
 }
 
 .mx_Slider_selection {
     display: flex;
     align-items: center;
-    width: calc(100% - 1rem); // 2 * half the width of a dot
-    height: 1rem;
+    width: calc(100% - 1em); // 2 * half the width of a dot
+    height: 1em;
     position: absolute;
 }
 
 .mx_Slider_selectionDot {
     transition: left 0.25s;
     position: absolute;
-    width: 1.1rem;
-    height: 1.1rem;
+    width: 1.1em;
+    height: 1.1em;
     background-color: $Slider-selection-color;
     border-radius: 50%;
     box-shadow: 0 0 6px lightgrey;
@@ -63,13 +63,13 @@ limitations under the License.
 .mx_Slider_selection > hr {
     transition: width 0.25s;
     margin: 0;
-    border: 0.2rem solid $Slider-selection-color;
+    border: 0.2em solid $Slider-selection-color;
 }
 
 .mx_Slider_dot {
     transition: background-color 0.2s ease-in;
-    height: 1rem;
-    width: 1rem;
+    height: 1em;
+    width: 1em;
     border-radius: 50%;
     background-color: $Slider-background-color;
     z-index: 0;
@@ -89,7 +89,7 @@ limitations under the License.
 // The following is a hack to center the labels without adding
 // any width to the slider's dots.
 .mx_Slider_labelContainer {
-    width: 1rem;
+    width: 1em;
 }
 
 .mx_Slider_label {
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index e4285e248c..28a2510508 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -27,6 +27,7 @@ limitations under the License.
     padding: 10px;
     background: #FFFFFF;
     border-radius: 10px;
+    font-size: 10px;
 }
 
 .mx_AppearanceUserSettingsTab_fontSlider_smallText {
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index a9fc41c8cc..6ec044da41 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -89,7 +89,7 @@ export default class Slider extends React.Component<IProps> {
                     { this.props.disabled ?
                         null :
                         <div className="mx_Slider_selection">
-                            <div className="mx_Slider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} />
+                            <div className="mx_Slider_selectionDot" style={{left: "calc(-0.55em + " + offset + "%)"}} />
                             <hr style={{width: offset + "%"}} />
                         </div>
                     }