Set min-width only for label with multiline buttons

Signed-off-by: Jimmy Tanagra <[email protected]>
openhab · Sep 14, 2024 · a0da860 · a0da860
1 parent a6b83b7
commit a0da860
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/bundles/org.openhab.ui.basic/snippets-src/buttons.html b/bundles/org.openhab.ui.basic/snippets-src/buttons.html
@@ -2,7 +2,7 @@
 	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span class="mdl-form__label">
+	<span class="mdl-form__label %label_class%">
 		%label%
 	</span>
 	<span class="mdl-form__value mdl-form__value--group">

diff --git a/...g.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SwitchRenderer.java b/...g.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SwitchRenderer.java
@@ -133,9 +133,17 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
 
             snippet = preprocessSnippet(snippet, w);
 
-            snippet = snippet.replaceAll("%height_auto%", multiline ? "mdl-form__row--height-auto" : "");
-            snippet = snippet.replaceAll("%buttons_class%",
-                    multiline ? "mdl-form__buttons-multiline" : "mdl-form__buttons");
+            if (multiline) {
+                snippet = snippet //
+                        .replaceAll("%height_auto%", "mdl-form__row--height-auto")
+                        .replaceAll("%buttons_class%", "mdl-form__buttons-multiline")
+                        .replaceAll("%label_class%", "mdl-form__label-multiline");
+            } else {
+                snippet = snippet //
+                        .replaceAll("%height_auto%", "") //
+                        .replaceAll("%buttons_class%", "mdl-form__buttons") //
+                        .replaceAll("%label_class%", "");
+            }
 
             StringBuilder buttons = new StringBuilder();
             if (s.getMappings().isEmpty() && item != null) {

diff --git a/bundles/org.openhab.ui.basic/web-src/_layout.scss b/bundles/org.openhab.ui.basic/web-src/_layout.scss
@@ -225,14 +225,16 @@
 		@include flex-shrink(0);
 		@include flex-grow(2);
 		@include flex-2011(2 2 auto);
-		min-width: 5em;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		html.ui-bigger-font & {
 			font-size: 18px;
 		}
 	}
+	&__label-multiline {
+		min-width: 5em;
+	}
 	&__control {
 		padding-right: $form-row-desktop-padding;
 		padding-left: 4px;