From 7b008b22b67544b4eaafa8adc86bbc32cfc57567 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Sat, 22 Mar 2025 15:16:43 +0100
Subject: [PATCH] Mobile UI: improve small screen layout (#20007)

---
 assets/css/app.css                              | 7 +++++++
 assets/js/components/Helper/LabelAndValue.vue   | 2 +-
 assets/js/components/Loadpoints/Loadpoint.vue   | 4 +++-
 assets/js/components/Loadpoints/Mode.vue        | 8 +++++++-
 assets/js/components/Loadpoints/SessionInfo.vue | 7 +++++--
 5 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index c2546023c..e69497075 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -675,3 +675,10 @@ html.app .modal-dialog {
 input::-webkit-date-and-time-value {
 	text-align: left;
 }
+
+@media (max-width: 576px) {
+	.text-truncate-xs-only {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
diff --git a/assets/js/components/Helper/LabelAndValue.vue b/assets/js/components/Helper/LabelAndValue.vue
index 0028d40da..f45e971b0 100644
--- a/assets/js/components/Helper/LabelAndValue.vue
+++ b/assets/js/components/Helper/LabelAndValue.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="root">
-		<div class="mb-2 label" :class="labelClass">
+		<div class="mb-2 label text-truncate-xs-only" :class="labelClass">
 			<slot name="label">{{ label }}</slot>
 		</div>
 		<slot>
diff --git a/assets/js/components/Loadpoints/Loadpoint.vue b/assets/js/components/Loadpoints/Loadpoint.vue
index 366855b6d..f172955ea 100644
--- a/assets/js/components/Loadpoints/Loadpoint.vue
+++ b/assets/js/components/Loadpoints/Loadpoint.vue
@@ -54,7 +54,7 @@
 						:label="$t('main.loadpoint.power')"
 						:value="chargePower"
 						:valueFmt="fmtPower"
-						class="mb-2 text-nowrap"
+						class="mb-2 text-nowrap text-truncate-xs-only"
 						align="start"
 					/>
 					<shopicon-regular-lightning
@@ -372,7 +372,9 @@ export default {
 
 .details > div {
 	flex-grow: 1;
+	flex-shrink: 1;
 	flex-basis: 0;
+	min-width: 0;
 }
 .details > div:nth-child(2) {
 	text-align: center;
diff --git a/assets/js/components/Loadpoints/Mode.vue b/assets/js/components/Loadpoints/Mode.vue
index 44fc81e57..87237ea95 100644
--- a/assets/js/components/Loadpoints/Mode.vue
+++ b/assets/js/components/Loadpoints/Mode.vue
@@ -4,7 +4,7 @@
 			v-for="m in modes"
 			:key="m"
 			type="button"
-			class="btn flex-grow-1 flex-shrink-1"
+			class="btn flex-grow-1 flex-shrink-1 text-truncate-xs-only"
 			:class="{ active: isActive(m) }"
 			tabindex="0"
 			@click="setTargetMode(m)"
@@ -71,6 +71,12 @@ export default {
 	color: var(--evcc-default-text);
 	border: none;
 }
+@media (max-width: 576px) {
+	.btn {
+		padding: 0.1em 0.2em;
+	}
+}
+
 .btn:hover {
 	color: var(--evcc-gray);
 }
diff --git a/assets/js/components/Loadpoints/SessionInfo.vue b/assets/js/components/Loadpoints/SessionInfo.vue
index 50ff07c32..526be4716 100644
--- a/assets/js/components/Loadpoints/SessionInfo.vue
+++ b/assets/js/components/Loadpoints/SessionInfo.vue
@@ -8,9 +8,12 @@
 					data-testid="sessionInfoSelect"
 					@change="selectOption($event.target.value)"
 				>
-					<span class="text-decoration-underline" data-testid="sessionInfoLabel">
+					<div
+						class="text-decoration-underline text-truncate-xs-only"
+						data-testid="sessionInfoLabel"
+					>
 						{{ label }}
-					</span>
+					</div>
 				</CustomSelect>
 			</template>
 			<template #value>