From 0e9bc006e50e7611649f14bad639ade1306fe62f Mon Sep 17 00:00:00 2001
From: Andy Scherzinger <info@andy-scherzinger.de>
Date: Wed, 21 Oct 2026 23:40:04 +0200
Subject: [PATCH] fix(editor): fit translated labels into the menus

Bootstrap's .label rule keeps the labels of the right-click menu on one
line, so longer labels such as "Arrange Up" or "Neuer Geschwisterknoten"
were cut off at the edge of the round buttons. Let them wrap, break long
words, use a smaller font and centre them in the button.

The theme picker's buttons have a fixed size as well, so wrap theme
names such as "Kompakt runde Knoten" instead of letting them overflow.

Fixes #141
Fixes #160

Assisted-by: Claude Code:claude-opus-5-5
Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>
(cherry picked from commit cf08e7d1ece68a94c22e98f78d6bee98f6c07805)
---
 templates/viewer.php     |  8 ++++++++
 vendor/hotbox/hotbox.css | 13 ++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/templates/viewer.php b/templates/viewer.php
index 4b926aa8..9accc0d2 100644
--- a/templates/viewer.php
+++ b/templates/viewer.php
@@ -117,6 +117,14 @@
 			right: 0;
 			left: auto;
 		}
+		/* wrap theme names that are wider than their fixed-size buttons */
+		div a.theme-item {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			vertical-align: middle;
+			line-height: 1.2;
+		}
 	</style>
 </head>
 <script nonce="<?=$nonce?>">
diff --git a/vendor/hotbox/hotbox.css b/vendor/hotbox/hotbox.css
index a86b0476..612aa39d 100644
--- a/vendor/hotbox/hotbox.css
+++ b/vendor/hotbox/hotbox.css
@@ -19,6 +19,11 @@
   margin-top: -35px;
   border-radius: 100%;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 6px;
+  box-sizing: border-box;
 }
 .hotbox .state .center .label,
 .hotbox .state .ring .label,
@@ -31,11 +36,13 @@
 }
 .hotbox .state .center .label,
 .hotbox .state .ring .label {
-  font-size: 16px;
-  margin-top: 17px;
+  font-size: 12px;
   color: black;
   font-weight: normal;
-  line-height: 1em;
+  line-height: 1.1em;
+  overflow-wrap: anywhere;
+  white-space: normal;
+  padding: 0;
 }
 .hotbox .state .center .key,
 .hotbox .state .ring .key {