fix: prevent button content from overflowing in translated labels (#3112)

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

@@ -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>
     `;
   }