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:
Aotumuri
2026-02-26 19:24:22 +09:00
committed by GitHub
parent 7b785ea79a
commit a7b137b3b7
@@ -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"