Make slider independant of label size

res/css/views/elements/_Slider.scss

@@ -33,7 +33,7 @@ limitations under the License.
     position: absolute;
     height: 1rem;
     width: 100%;
-    padding: 0 1.1rem;
+    padding: 0 0.5rem; // half the width of a dot.
     align-items: center;
 }
 
@@ -45,7 +45,7 @@ limitations under the License.
 .mx_Slider_selection {
     display: flex;
     align-items: center;
-    width: calc(100% - 2.2rem);
+    width: calc(100% - 1rem); // 2 * half the width of a dot
     height: 1rem;
     position: absolute;
 }
@@ -87,3 +87,15 @@ limitations under the License.
     align-items: center;
     color: $Slider-background-color;
 }
+
+// The following is a hack to center the labels without adding
+// any width to the slider's dots.
+.mx_Slider_labelContainer {
+    width: 1rem;
+}
+
+.mx_Slider_label {
+    position: relative;
+    width: fit-content;
+    left: -50%;
+}

src/components/views/elements/Slider.tsx

@@ -87,9 +87,11 @@ class Dot extends React.Component<DotIProps> {
 
         return <span onClick={this.props.onClick} className="mx_Slider_dotValue">
             <div className={className} />
-            <div>
+            <div className="mx_Slider_labelContainer">
+                <div className="mx_Slider_label">
                 {this.props.label}
             </div>
+            </div>
         </span>;
     }
 }