From 3a49b9a794496546a8bb9c671b1cfa65773cc198 Mon Sep 17 00:00:00 2001
From: David <122132914+EnderBoy9217@users.noreply.github.com>
Date: Tue, 14 Apr 2026 23:19:56 -0400
Subject: [PATCH] Fix settings-slider visuals (#3673)

Resolves #3672

## Description:

Correctly aligns elements in the `settings-slider` element to avoid them
from overflowing off of the card. Also moves the slider label to keep
all settings buttons/sliders in the same column.

Before:
<img width="875" height="326" alt="image"
src="https://github.com/user-attachments/assets/0aad7b1c-be87-4a8f-a816-5892343af377"
/>

After:
<img width="861" height="323" alt="image"
src="https://github.com/user-attachments/assets/5d8129f4-3b9d-4fb8-952b-bbdae461181f"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

@EnderBoy9217
---
 .../components/baseComponents/setting/SettingSlider.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/client/components/baseComponents/setting/SettingSlider.ts b/src/client/components/baseComponents/setting/SettingSlider.ts
index 0104e7f66..17f7434a5 100644
--- a/src/client/components/baseComponents/setting/SettingSlider.ts
+++ b/src/client/components/baseComponents/setting/SettingSlider.ts
@@ -60,9 +60,13 @@ export class SettingSlider extends LitElement {
         </div>
 
         <div
-          class="flex flex-col items-start sm:items-end gap-2 shrink-0 w-full sm:w-[200px]"
+          class="flex flex-col items-start sm:items-end gap-2 shrink-0 sm:w-auto sm:w-[200px]"
         >
           <div class="flex items-center gap-2 w-full">
+            <span
+              class="text-white font-bold text-sm shrink-0 text-right min-w-[3ch]"
+              >${this.value}%</span
+            >
             <input
               type="range"
               class="flex-1 w-auto appearance-none h-2 bg-transparent rounded outline-none 
@@ -76,10 +80,6 @@ export class SettingSlider extends LitElement {
               .value=${String(this.value)}
               @input=${this.handleInput}
             />
-            <span
-              class="text-white font-bold text-sm shrink-0 text-right min-w-[3ch]"
-              >${this.value}%</span
-            >
           </div>
         </div>
       </div>