From 3478b3ab13b091b61aa79e2c9d79e438f5c8e6fa Mon Sep 17 00:00:00 2001
From: Aotumuri <aotumuri.yt@gmail.com>
Date: Sun, 26 Oct 2025 06:35:24 +0900
Subject: [PATCH] Fix: Prevent unbind button overflow and wrap long text in
 keybind settings (#2287)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:
This PR fixes layout issues in the User Settings → Keybind section where
the “Unbind” button text would overflow in languages with long
translations (e.g., Italian).

before
<img width="372" height="477" alt="スクリーンショット 2025-10-25 15 42 09"
src="https://github.com/user-attachments/assets/ce31e116-1848-4350-a6da-011b10a42668"
/>

after
<img width="383" height="168" alt="スクリーンショット 2025-10-25 15 41 47"
src="https://github.com/user-attachments/assets/8133ed56-f920-42a8-9477-78561fdd477a"
/>

## 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

Co-authored-by: Evan <evanpelle@gmail.com>
---
 .../baseComponents/setting/SettingKeybind.ts  | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/client/components/baseComponents/setting/SettingKeybind.ts b/src/client/components/baseComponents/setting/SettingKeybind.ts
index 4e102ee0b..f498c4e3f 100644
--- a/src/client/components/baseComponents/setting/SettingKeybind.ts
+++ b/src/client/components/baseComponents/setting/SettingKeybind.ts
@@ -23,12 +23,19 @@ export class SettingKeybind extends LitElement {
         <div class="setting-label-group">
           <label class="setting-label block mb-1">${this.label}</label>
 
-          <div class="setting-keybind-box">
-            <div class="setting-keybind-description">${this.description}</div>
+          <div class="setting-keybind-box flex flex-wrap items-start gap-2">
+            <div
+              class="setting-keybind-description flex-1 min-w-[240px] max-w-full whitespace-normal break-words text-sm text-gray-300"
+              style="word-break: break-word;"
+            >
+              ${this.description}
+            </div>
 
-            <div class="flex items-center gap-2">
+            <div
+              class="flex flex-wrap items-center gap-2 gap-y-1 basis-full sm:basis-auto min-w-0"
+            >
               <span
-                class="setting-key"
+                class="setting-key shrink-0"
                 tabindex="0"
                 @keydown=${this.handleKeydown}
                 @click=${this.startListening}
@@ -37,13 +44,13 @@ export class SettingKeybind extends LitElement {
               </span>
 
               <button
-                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded transition"
+                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded transition whitespace-normal break-words max-w-full"
                 @click=${this.resetToDefault}
               >
                 ${translateText("user_setting.reset")}
               </button>
               <button
-                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded transition"
+                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded transition whitespace-normal break-words max-w-full"
                 @click=${this.unbindKey}
               >
                 ${translateText("user_setting.unbind")}