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
This commit is contained in:
David
2026-04-14 23:19:56 -04:00
committed by GitHub
parent eb7cf1ead3
commit 3a49b9a794
@@ -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>