Truncated loadpoint name on mobile with small display

[scharph]

The loadpoint name is truncated, when a small display is used like iPhone SE

Describe the solution you'd like
The Mode panel could be moved and presented centered under the actual values, so the loadpointname has enough space

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context

changed some mb-3 to mb2
and justify-content-center for centering of the panel

diff --git a/assets/js/components/Loadpoint.vue b/assets/js/components/Loadpoint.vue
index f9df86fe..7fbf7320 100644
--- a/assets/js/components/Loadpoint.vue
+++ b/assets/js/components/Loadpoint.vue
@@ -1,15 +1,9 @@
 <template>
        <div class="loadpoint bg-white p-4">
-               <div class="d-flex justify-content-between align-items-center mb-3">
-                       <h3 class="mb-3 me-2 text-truncate">
+               <div class="d-flex justify-content-between align-items-center">
+                       <h3 class="mb-2 me-2 text-truncate">
                                {{ title || $t("main.loadpoint.fallbackName") }}
                        </h3>
-                       <div class="mb-3 d-flex align-items-center">
-                               <Mode :mode="mode" @updated="setTargetMode" />
-                               <button v-if="$hiddenFeatures" class="btn btn-link text-gray p-0 flex-shrink-0">
-                                       <shopicon-filled-options size="s"></shopicon-filled-options>
-                               </button>
-                       </div>
                </div>
 
                <div
@@ -28,7 +22,7 @@
                        }}
                </div>
 
-               <div class="details d-flex align-items-start mb-3">
+               <div class="details d-flex align-items-start mb-2">
                        <div>
                                <div class="d-flex align-items-center">
                                        <LabelAndValue
@@ -64,6 +58,12 @@
                                        ${fmtShortDurationUnit(chargeDurationInterpolated)}`"
                        />
                </div>
+               <div class="mb-2 d-flex justify-content-center">
+                       <Mode :mode="mode" @updated="setTargetMode" />
+                       <button v-if="$hiddenFeatures" class="btn btn-link text-gray p-0 flex-shrink-0">
+                               <shopicon-filled-options size="s"></shopicon-filled-options>
+                       </button>
+               </div>
                <Vehicle

[andig]

Danke für das Issue. Momentan by design.

[naltatis]

Wir haben das Thema auf dem Zettel. Die Elemente in mehrere Zeilen ziehen geht natürlich, führt aber zu anderen Probleme, da bspw der footer oder andere Werte auf kleine phones aus dem viewport rutscht.

Wir werden als nächsten Schritt die Moduswahl vereinfachen und damit kompakter machen. Damit gibts auch wieder mehr Platz für den Namen des Loadpoints.

[ThomDietrich]

@naltatis gibt es ein Ticket mit Diskussion zu besagter Vereinfachung der Modusauswahl? Die aktuellen Modi könnten optimiert werden, ich wurde aber schon von einer Ansicht verwirrt die lediglich "Cheap" und "Fast" zeigte...