From fda7d67bc35f3184619752aad0ac2e73873a8205 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jens=20K=C3=BCper?= <j.kueper@shopware.com>
Date: Wed, 22 Jul 2026 14:53:54 +0200
Subject: [PATCH] UI: fix loadpoint value alignment on narrow screens (#31993)

---
 assets/js/components/Loadpoints/SessionInfo.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/assets/js/components/Loadpoints/SessionInfo.vue b/assets/js/components/Loadpoints/SessionInfo.vue
index 645d88ce4ae..d1d30ec3d50 100644
--- a/assets/js/components/Loadpoints/SessionInfo.vue
+++ b/assets/js/components/Loadpoints/SessionInfo.vue
@@ -4,6 +4,7 @@
 			<template #label>
 				<CustomSelect
 					inline
+					class="labelSelect"
 					:selected="selectedKey"
 					:options="selectOptions"
 					data-testid="sessionInfoSelect"
@@ -201,6 +202,14 @@ export default defineComponent({
 	user-select: none;
 	-webkit-user-select: none;
 }
+/* Truncation (overflow: hidden via .text-truncate-xs-only) moves the baseline of the
+   inline select to its bottom edge, growing the label's line box and pushing the value
+   below the other loadpoint values on narrow screens (#31993). Top-align the select to
+   keep the label at its normal line height. !important is needed to win over the
+   Bootstrap .align-baseline utility set by CustomSelect. */
+.sessionInfo :deep(.labelSelect) {
+	vertical-align: top !important;
+}
 .sessionInfo .value {
 	cursor: pointer;
 }