mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 12:00:44 +00:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user