Mobile UI: improve small screen layout (#20007)

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;
+	}
+}

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>

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;

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);
 }

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>