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 {