From 144442a99b7dbb86e4373be835aeb8c5f3397826 Mon Sep 17 00:00:00 2001
From: Aotumuri <aotumuri.yt@gmail.com>
Date: Wed, 4 Feb 2026 08:02:07 +0900
Subject: [PATCH] fix: prevent button content from overflowing in translated
 labels (#3112)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

Prevents translated button text from overflowing its container by
constraining layout and clipping excess content.

before
<img width="234" height="133" alt="スクリーンショット 2026-02-04 6 46 35"
src="https://github.com/user-attachments/assets/2cfe4f3e-ac5c-42d0-8175-76ca53fa3b1b"
/>
after
<img width="189" height="135" alt="スクリーンショット 2026-02-04 6 46 46"
src="https://github.com/user-attachments/assets/e2fd2439-6cd3-4831-86b2-28a374bc7ba4"
/>

## 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
---
 src/client/components/baseComponents/Button.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/client/components/baseComponents/Button.ts b/src/client/components/baseComponents/Button.ts
index dd0818c5a..e3dd03898 100644
--- a/src/client/components/baseComponents/Button.ts
+++ b/src/client/components/baseComponents/Button.ts
@@ -13,7 +13,7 @@ export class OButton extends LitElement {
   @property({ type: Boolean }) disable = false;
   @property({ type: Boolean }) fill = false;
   private static readonly BASE_CLASS =
-    "bg-blue-600 hover:bg-blue-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg";
+    "bg-blue-600 hover:bg-blue-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg whitespace-normal break-words leading-tight overflow-hidden relative";
 
   createRenderRoot() {
     return this;
@@ -39,9 +39,11 @@ export class OButton extends LitElement {
         class=${classMap(this.getButtonClasses())}
         ?disabled=${this.disable}
       >
-        ${this.translationKey === ""
-          ? this.title
-          : translateText(this.translationKey)}
+        <span class="block min-w-0">
+          ${this.translationKey === ""
+            ? this.title
+            : translateText(this.translationKey)}
+        </span>
       </button>
     `;
   }