From a7b137b3b7cf6ba9a934b14c8bb03e406a6f7ddb Mon Sep 17 00:00:00 2001
From: Aotumuri <aotumuri.yt@gmail.com>
Date: Thu, 26 Feb 2026 19:24:22 +0900
Subject: [PATCH] fix: place select controls below text (#3299)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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
---
 .../components/baseComponents/setting/SettingSelect.ts      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/client/components/baseComponents/setting/SettingSelect.ts b/src/client/components/baseComponents/setting/SettingSelect.ts
index c9e043dab..c36a8e1d7 100644
--- a/src/client/components/baseComponents/setting/SettingSelect.ts
+++ b/src/client/components/baseComponents/setting/SettingSelect.ts
@@ -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"