mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 12:00:44 +00:00
fix: place select controls below text (#3299)
## Description: Updated `setting-select` layout to a vertical flow: - Header - Description - Selector before <img width="1306" height="770" alt="スクリーンショット 2026-02-26 19 10 36" src="https://github.com/user-attachments/assets/7da2a9af-b8bd-4f7f-8cd6-f22946d07720" /> <img width="372" height="749" alt="スクリーンショット 2026-02-26 19 14 18" src="https://github.com/user-attachments/assets/50148101-4c9e-4db5-b6c3-53f819ee9e6a" /> after <img width="1470" height="827" alt="スクリーンショット 2026-02-26 19 10 01" src="https://github.com/user-attachments/assets/9e36420b-a616-4056-8b11-ebb4bf25a5b2" /> <img width="692" height="832" alt="スクリーンショット 2026-02-26 19 10 15" src="https://github.com/user-attachments/assets/3b3e8fbf-fd57-47c1-9c87-763df81d673a" /> ## 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: aotumuri
This commit is contained in:
@@ -37,9 +37,9 @@ export class SettingSelect extends LitElement {
|
||||
render() {
|
||||
return html`
|
||||
<div
|
||||
class="flex flex-row items-center justify-between w-full p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 transition-all gap-4"
|
||||
class="flex flex-col w-full p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 transition-all gap-3"
|
||||
>
|
||||
<div class="flex flex-col flex-1 min-w-0 mr-4">
|
||||
<div class="flex flex-col min-w-0">
|
||||
<label
|
||||
class="text-white font-bold text-base block mb-1"
|
||||
for="setting-select-input"
|
||||
@@ -49,7 +49,7 @@ export class SettingSelect extends LitElement {
|
||||
${this.description}
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative shrink-0 w-[200px]">
|
||||
<div class="relative w-full">
|
||||
<select
|
||||
id="setting-select-input"
|
||||
class="w-full appearance-none py-2 pl-3 pr-9 border border-white/20 rounded-lg bg-black/40 text-white font-mono text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
|
||||
|
||||
Reference in New Issue
Block a user