From adedfec1d0bb8644003eca46367253cbf66f3cc5 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 26 Apr 2025 23:27:09 +0200
Subject: [PATCH] Update popup appearance

---
 src/csui/Popup.vue                            |  19 +-
 src/csui/csui-popup.html                      |   6 +-
 .../AlignmentOptionsControlComponent.vue      |  14 +-
 .../PlayerUiPanels/BaseExtensionSettings.vue  |   2 +-
 .../src/PlayerUiPanels/ChangelogPanel.vue     |   1 +
 .../VideoSettings/CropOptionsPanel.vue        |  11 +-
 .../VideoSettings/StretchOptionsPanel.vue     |   8 +-
 .../VideoSettings/ZoomOptionsPanel.vue        | 168 ++++++++++--------
 src/csui/src/PlayerUiPanels/VideoSettings.vue |   2 +-
 src/csui/src/components/Button.vue            |  11 +-
 .../src/popup/panels/PopupVideoSettings.vue   | 104 +++++++----
 src/csui/src/res-common/common.scss           |  18 +-
 12 files changed, 225 insertions(+), 139 deletions(-)
diff --git a/src/csui/Popup.vue b/src/csui/Popup.vue
index fd14c11..c1ee75d 100644
--- a/src/csui/Popup.vue
+++ b/src/csui/Popup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="popup-panel">
+  <div class="popup-panel" style="height: 100vh">
     <!--
       NOTE — the code that makes ultrawidify popup work in firefox regardless of whether the
       extension is being displayed in a normal or a small/overflow popup breaks the popup
@@ -10,6 +10,7 @@
       further than that.
     -->
     <div v-if="settingsInitialized"
+        style="height: 100vh"
         class="popup flex flex-col no-overflow"
         :class="{'popup-chrome': ! BrowserDetect?.firefox}"
     >
@@ -78,7 +79,7 @@
         </div>
 
         <!-- CONTENT -->
-        <div class="scrollable" style="flex: 7 7; padding: 1rem;">
+        <div class="scrollable window-content" style="flex: 7 7; padding: 1rem;">
           <template v-if="settings && siteSettings">
             <PopupVideoSettings
               v-if="selectedTab === 'videoSettings'"
@@ -86,14 +87,6 @@
               :eventBus="eventBus"
               :siteSettings="siteSettings"
             ></PopupVideoSettings>
-            <!-- <PlayerDetectionPanel
-              v-if="selectedTab === 'playerDetection'"
-              :settings="settings"
-              :eventBus="eventBus"
-              :siteSettings="siteSettings"
-              :site="site.host"
-            >
-            </PlayerDetectionPanel> -->
             <BaseExtensionSettings
               v-if="selectedTab === 'extensionSettings'"
               :settings="settings"
@@ -610,4 +603,10 @@ pre {
 h1 {
   margin: 0; padding: 0; font-weight: 400; font-size:24px;
 }
+
+.window-content {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
 </style>
diff --git a/src/csui/csui-popup.html b/src/csui/csui-popup.html
index af3b91c..e0b9e98 100644
--- a/src/csui/csui-popup.html
+++ b/src/csui/csui-popup.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="position: relative">
+<html lang="en" style="position: relative; height: 600px">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
@@ -10,9 +10,9 @@
   <% } %>
 </head>
 <body
-  style="width: 100%; height: 100%; overflow-x: hidden; min-width: 750px"
+  style="width: 100%; height: 100vh; overflow-x: hidden; min-width: 750px;"
 >
-  <div id="app">
+  <div id="app" style="max-height: 100vh;">
 
   </div>
   <script src="csui-popup.js"></script>
diff --git a/src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue b/src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue
index 9dd323d..e524f3b 100644
--- a/src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue
+++ b/src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="alignment-box">
+  <div class="alignment-box" :class="{large: large}">
     <div
       class="col top left"
       @click="align(VideoAlignment.Left, VideoAlignment.Top)"
@@ -60,10 +60,10 @@
 <script>
 import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
 
-
 export default {
   props: [
-    'eventBus'
+    'eventBus',
+    'large',
   ],
   data() {
     return {
@@ -89,6 +89,14 @@ export default {
   grid-template-columns: repeat(3, 1fr);
   gap: 0.5rem;
 
+  &.large {
+    max-width: 15rem;
+
+    .col {
+      width: 4rem;
+      height: 4rem;
+    }
+  }
 
   .col {
     display: flex;
diff --git a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
index 9abbd3f..12540e2 100644
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row w-full h-full">
-    <div class="flex flex-col">
+    <div class="flex flex-col w-full">
 
       <!-- TAB ROW -->
       <div class="flex flex-row">
diff --git a/src/csui/src/PlayerUiPanels/ChangelogPanel.vue b/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
index 0c0f76c..5b19bf9 100644
--- a/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
+++ b/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
@@ -11,6 +11,7 @@
           <li>Keyboard zoom now works</li>
           <li><code>www.youtube-nocookie.com</code> has been added to the "officially supported" list</li>
           <li>Fixed the bug where UI would sometimes refuse to stay hidden</li>
+          <li>New experimental zoom options</li>
         </ul>
       </div>
       <div style="width: 1rem; height: 0px;"></div>
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
index c0865f7..b7e0b83 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
@@ -3,8 +3,12 @@
 
     <ShortcutButton
       v-for="(command, index) of settings?.active.commands.crop"
-      class="flex b3 button"
-      :class="{active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command)}"
+      class="flex button"
+      :class="{
+        active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command),
+        'b3-compact': compact,
+        b3: !compact
+      }"
       :key="index"
       :label="command.label"
       :shortcut="getKeyboardShortcutLabel(command)"
@@ -170,7 +174,8 @@ export default {
     'siteSettings',
     'eventBus',
     'isEditing',
-    'allowSettingSiteDefault'
+    'allowSettingSiteDefault',
+    'compact',
   ],
   computed: {
     siteDefaultCrop()  {
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
index fe71110..678c7e7 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
@@ -3,7 +3,10 @@
     <ShortcutButton
       v-for="(command, index) of settings?.active.commands.stretch"
       class="b3 button"
-      :class="{active: editMode ? index === editModeOptions?.stretch?.selectedIndex : isActiveStretch(command)}"
+      :class="{active: editMode ? index === editModeOptions?.stretch?.selectedIndex : isActiveStretch(command),
+        'b3-compact': compact,
+        b3: !compact
+      }"
       :key="index"
       :label="command.label"
       :shortcut="getKeyboardShortcutLabel(command)"
@@ -184,7 +187,8 @@ export default {
     'siteSettings',
     'eventBus',
     'isEditing',
-    'allowSettingSiteDefault'
+    'allowSettingSiteDefault',
+    'compact',
   ],
   components: {
     ShortcutButton,
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
index 09460b2..2af04a6 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
@@ -5,8 +5,11 @@
 
       <ShortcutButton
         v-for="(command, index) of settings?.active.commands.zoom"
-        class="flex b3 button"
-        :class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command)}"
+        class="flex button"
+        :class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command),
+          'b3-compact': compact,
+          b3: !compact
+        }"
         :key="index"
         :label="command.label"
         :shortcut="getKeyboardShortcutLabel(command)"
@@ -131,80 +134,81 @@
         min, max and value need to be implemented in js as this slider
         should use logarithmic scale
       -->
-      <div class="flex flex-row flex-end">
-        <Button
-          v-if="zoomAspectRatioLocked"
-          label="Unlock aspect ratio"
-          icon="lock-open"
-          :fixedWidth="true"
-          @click="toggleZoomAr()"
-        >
-        </Button>
-        <Button
-          v-else
-          label="Lock aspect ratio"
-          icon="lock"
-          :fixedWidth="true"
-          @click="toggleZoomAr()"
-        >
-        </Button>
+      <div class="flex flex-row w-full" style="margin-top: 0.66rem">
+        <div style="position:relative;" class="grow">
+          <template v-if="zoomAspectRatioLocked">
+            <div class="slider-label">
+              Zoom: {{getZoomForDisplay('x')}}
+            </div>
+            <input id="_input_zoom_slider"
+                    class="input-slider"
+                    type="range"
+                    step="any"
+                    min="-1"
+                    max="3"
+                    :value="zoom.x"
+                    @input="changeZoom($event.target.value)"
+                    />
+          </template>
+          <template v-else>
+            <div class="slider-label">Horizontal zoom: {{getZoomForDisplay('x')}}</div>
+            <input id="_input_zoom_slider"
+                    class="input-slider"
+                    type="range"
+                    step="any"
+                    min="-1"
+                    max="4"
+                    :value="zoom.x"
+                    @input="changeZoom($event.target.value, 'x')"
+            />
+
+            <div class="slider-label">Vertical zoom: {{getZoomForDisplay('y')}}</div>
+            <input id="_input_zoom_slider_2"
+                    class="input-slider"
+                    type="range"
+                    step="any"
+                    min="-1"
+                    max="3"
+                    :value="zoom.y"
+                    @input="changeZoom($event.target.value, 'y')"
+            />
+          </template>
+        </div>
+
+        <div class="flex flex-row items-center justify-center" style="padding-left: 1rem">
+          <Button
+            v-if="zoomAspectRatioLocked"
+            icon="lock"
+            :iconSize="16"
+            :fixedWidth="true"
+            :noPad="true"
+            @click="toggleZoomAr()"
+          >
+          </Button>
+          <Button
+            v-else
+            icon="lock-open-variant"
+            :iconSize="16"
+            :fixedWidth="true"
+            :noPad="true"
+            @click="toggleZoomAr()"
+          >
+          </Button>
+          <Button
+            icon="restore"
+            :iconSize="16"
+            :noPad="true"
+            @click="resetZoom()"
+          ></Button>
+        </div>
       </div>
-      <template v-if="zoomAspectRatioLocked">
-        <input id="_input_zoom_slider"
-                class="input-slider"
-                type="range"
-                step="any"
-                min="-1"
-                max="3"
-                :value="zoom.x"
-                @input="changeZoom($event.target.value)"
-                />
-        <div style="overflow: auto" class="flex flex-row">
-          <div class="flex flex-grow medium-small x-pad-1em">
-            Zoom: {{getZoomForDisplay('x')}}
-          </div>
-          <div class="flex flex-nogrow flex-noshrink medium-small">
-            <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
-          </div>
-        </div>
-      </template>
-      <template v-else>
-        <div>Horizontal zoom</div>
-        <input id="_input_zoom_slider"
-                class="input-slider"
-                type="range"
-                step="any"
-                min="-1"
-                max="4"
-                :value="zoom.x"
-                @input="changeZoom($event.target.value, 'x')"
-        />
 
-        <div>Vertical zoom</div>
-        <input id="_input_zoom_slider"
-                class="input-slider"
-                type="range"
-                step="any"
-                min="-1"
-                max="3"
-                :value="zoom.y"
-                @input="changeZoom($event.target.value, 'y')"
-        />
-
-        <div style="overflow: auto" class="flex flex-row">
-          <div class="flex flex-grow medium-small x-pad-1em">
-            Zoom: {{getZoomForDisplay('x')}} x {{getZoomForDisplay('y')}}
-          </div>
-          <div class="flex flex-nogrow flex-noshrink medium-small">
-            <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
-          </div>
-        </div>
-      </template>
     </template>
   </div>
 </template>
 
 <script>
+import Button from '@csui/src/components/Button.vue';
 import ShortcutButton from '@csui/src/components/ShortcutButton.vue';
 import EditShortcutButton from '@csui/src/components/EditShortcutButton';
 import EditModeMixin from '@csui/src/utils/EditModeMixin';
@@ -214,6 +218,7 @@ import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
 
 export default {
   components: {
+    Button,
     ShortcutButton,
     EditShortcutButton,
   },
@@ -246,7 +251,8 @@ export default {
     'settings',      // required for buttons and actions, which are global
     'siteSettings',
     'eventBus',
-    'isEditing'
+    'isEditing',
+    'compact',
   ],
   created() {
     if (this.isEditing) {
@@ -282,8 +288,7 @@ export default {
       // this.eventBus.send('set-zoom', {zoom: 1, axis: 'y'});
       // this.eventBus.send('set-zoom', {zoom: 1, axis: 'x'});
 
-      this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'y'});
-      this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'x'});
+      this.eventBus?.sendToTunnel('set-zoom', {zoom: 1});
     },
     changeZoom(newZoom, axis) {
       // we store zoom logarithmically on this compnent
@@ -297,10 +302,9 @@ export default {
       newZoom = Math.pow(2, newZoom);
 
       if (this.zoomAspectRatioLocked) {
-        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'y'});
-        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'x'});
+        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom});
       } else {
-        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: axis ?? 'x'});
+        this.eventBus?.sendToTunnel('set-zoom', {zoom: {[axis ?? 'x']: newZoom}});
       }
     },
     isActiveZoom(command) {
@@ -314,3 +318,17 @@ export default {
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
 <style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
 <style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
+<style lang="scss" scoped>
+.input-slider {
+  width: 100%;
+  box-sizing:border-box;
+  margin-right: 1rem;
+  margin-left: 0rem;
+}
+.slider-label {
+  margin-bottom: -0.5rem;
+  color: #aaa;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+</style>
diff --git a/src/csui/src/PlayerUiPanels/VideoSettings.vue b/src/csui/src/PlayerUiPanels/VideoSettings.vue
index b7c2ee8..8e1808f 100644
--- a/src/csui/src/PlayerUiPanels/VideoSettings.vue
+++ b/src/csui/src/PlayerUiPanels/VideoSettings.vue
@@ -38,7 +38,7 @@
         <!-- CROP OPTIONS -->
         <div v-if="settings" class="sub-panel">
           <div class="flex flex-row">
-            <mdicon name="crop" :size="32" />
+            <mdicon name="crop" :size="16" />
             <h1>Crop video:</h1>
           </div>
 
diff --git a/src/csui/src/components/Button.vue b/src/csui/src/components/Button.vue
index 8c26841..b035b08 100644
--- a/src/csui/src/components/Button.vue
+++ b/src/csui/src/components/Button.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="button center-text"
-       :class="{'setting-selected': selected }"
+       :class="{
+          'setting-selected': selected,
+          'no-pad': noPad,
+        }"
   >
+    <mdicon v-if="icon" :name="icon" :size="iconSize ?? 24"></mdicon>
     <div class="label">
       {{label}}
     </div>
@@ -15,6 +19,8 @@ export default {
     selected: Boolean,
     label: String,
     icon: String,
+    iconSize: Number,
+    noPad: Boolean
   }
 }
 </script>
@@ -40,4 +46,7 @@ export default {
   }
 
 }
+.no-pad {
+  padding: 0.5rem 1rem !important;
+}
 </style>
diff --git a/src/csui/src/popup/panels/PopupVideoSettings.vue b/src/csui/src/popup/panels/PopupVideoSettings.vue
index d993f10..cced75e 100644
--- a/src/csui/src/popup/panels/PopupVideoSettings.vue
+++ b/src/csui/src/popup/panels/PopupVideoSettings.vue
@@ -12,61 +12,86 @@
     </template>
 
     <div class="flex flex-row">
-      <mdicon name="crop" :size="24" />&nbsp;&nbsp;
-      <h1>Crop video:</h1>
+      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
+      <span>CROP</span>
     </div>
-
-    <CropOptionsPanel
-      style="margin-top: -2rem"
-      :settings="settings"
-      :eventBus="eventBus"
-      :siteSettings="siteSettings"
-      :isEditing="false"
+    <div
+      style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
     >
-    </CropOptionsPanel>
+      <CropOptionsPanel
+        :settings="settings"
+        :eventBus="eventBus"
+        :siteSettings="siteSettings"
+        :isEditing="false"
+        :compact="true"
+      >
+      </CropOptionsPanel>
+    </div>
 
     <div class="flex flex-row">
-      <mdicon name="crop" :size="24" />&nbsp;&nbsp;
-      <h1>Stretch video:</h1>
+      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
+      <span>STRETCH</span>
+    </div>
+    <div
+      style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
+    >
+      <StretchOptionsPanel
+        :settings="settings"
+        :eventBus="eventBus"
+        :siteSettings="siteSettings"
+        :isEditing="false"
+        :compact="true"
+      ></StretchOptionsPanel>
     </div>
-
-    <StretchOptionsPanel
-      style="margin-top: -2rem"
-      :settings="settings"
-      :eventBus="eventBus"
-      :siteSettings="siteSettings"
-      :isEditing="false"
-    ></StretchOptionsPanel>
 
     <div class="flex flex-row">
-      <mdicon name="crop" :size="24" />&nbsp;&nbsp;
-      <h1>Zoom:</h1>
+      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
+      <span>ZOOM</span>
+    </div>
+    <div
+      style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
+    >
+      <ZoomOptionsPanel
+        :settings="settings"
+        :eventBus="eventBus"
+        :siteSettings="siteSettings"
+        :isEditing="false"
+        :compact="true"
+      >
+      </ZoomOptionsPanel>
     </div>
 
-    <ZoomOptionsPanel
-      :settings="settings"
-      :eventBus="eventBus"
-      :siteSettings="siteSettings"
-      :isEditing="false"
+    <div class="flex flex-row">
+      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
+      <span>ALIGN</span>
+    </div>
+    <div
+      style="margin-bottom: 0.88rem;"
     >
-    </ZoomOptionsPanel>
+      <AlignmentOptionsControlComponent
+        :eventBus="eventBus"
+        :large="true"
+      > </AlignmentOptionsControlComponent>
+    </div>
+
 
   </div>
 
 </template>
 
 <script>
-import CropOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
-import StretchOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
-import ZoomOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
+import CropOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
+import StretchOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
+import ZoomOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
 import ExtensionMode from '@src/common/enums/ExtensionMode.enum.ts';
+import AlignmentOptionsControlComponent from '@csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue';
 
 export default {
-  data() {
-    return {
-      exec: null,
-      ExtensionMode: ExtensionMode,
-    };
+  components: {
+    CropOptionsPanel,
+    StretchOptionsPanel,
+    ZoomOptionsPanel,
+    AlignmentOptionsControlComponent
   },
   mixins: [
 
@@ -76,8 +101,11 @@ export default {
     'siteSettings',
     'eventBus',
   ],
-  components: {
-    CropOptionsPanel, StretchOptionsPanel, ZoomOptionsPanel
+  data() {
+    return {
+      exec: null,
+      ExtensionMode: ExtensionMode,
+    };
   },
   created() {
     this.eventBus.subscribe(
diff --git a/src/csui/src/res-common/common.scss b/src/csui/src/res-common/common.scss
index 8b9583e..d2eac1c 100644
--- a/src/csui/src/res-common/common.scss
+++ b/src/csui/src/res-common/common.scss
@@ -163,6 +163,7 @@ button, .button {
     flex-grow: 1;
     flex-shrink: 1;
     max-width: 24rem;
+    min-width: 16rem;
   }
 
   .has-hint {
@@ -174,8 +175,15 @@ button, .button {
     flex-grow: 1;
     flex-shrink: 1;
 
+    min-width: 12px;
+    max-width: 24rem;
+
     select {
       background: rgba($blackBg, $hoverTransparentOpacity);
+
+      min-width: 12px;
+      max-width: 100%;
+
       color: #fff;
       // border: 0px solid transparent;
       border: 1px solid rgba(255, 171, 102, 0.42);
@@ -217,9 +225,15 @@ button, .button {
   padding-left: 0.33rem;
   padding-right: 0.33rem;
 }
-.input-slider {
-  width: 480px;
+.b3-compact {
+  width: 7rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
+
+// .input-slider {
+//   width: 480px;
+// }
 .warning-lite {
   padding-right: 16px;
   padding-bottom: 16px;
