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