From f4e3f0848bf13600b081367259127a482e278563 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 24 Jul 2025 17:19:19 +0200
Subject: [PATCH 1/5] Charge point card title - entire first row of card

---
 .../source/src/components/ChargePointCard.vue | 107 +++++++++++-------
 1 file changed, 67 insertions(+), 40 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index df35a15af5..54c2adf335 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,52 +1,57 @@
 <template>
   <q-card ref="cardRef" class="full-height card-width">
-    <q-card-section>
-      <div class="row items-center text-h6 text-bold">
-        <div class="col flex items-center">
-          {{ name }}
-          <ChargePointLock :charge-point-id="props.chargePointId" />
-          <ChargePointStateIcon
-            :charge-point-id="Number(props.chargePointId)"
-          />
-          <ChargePointTimeCharging
-            :charge-point-id="Number(props.chargePointId)"
-            :readonly="true"
-            :iconSize="'xs'"
-            :toolTip="true"
-          />
-        </div>
-        <q-icon
-          class="cursor-pointer"
-          name="settings"
-          size="sm"
-          @click="settingsVisible = true"
+    <q-card-section class="row justify-between text-h6 text-bold">
+      {{ name }}
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section class="row flex items-center justify-between">
+      <div>
+        <ChargePointStateIcon :charge-point-id="Number(props.chargePointId)" />
+        <ChargePointTimeCharging
+          :charge-point-id="Number(props.chargePointId)"
+          :readonly="true"
+          :iconSize="'xs'"
+          :toolTip="true"
         />
+        <ChargePointLock :charge-point-id="props.chargePointId" />
       </div>
+      <q-icon
+        class="cursor-pointer"
+        name="settings"
+        size="sm"
+        @click="settingsVisible = true"
+      />
+    </q-card-section>
+    <q-card-section>
       <ChargePointFaultMessage :charge-point-id="props.chargePointId" />
       <ChargePointStateMessage :charge-point-id="props.chargePointId" />
-      <div class="row items-center q-mt-sm">
-        <ChargePointVehicleSelect
-          :charge-point-id="Number(props.chargePointId)"
-        />
-        <ChargePointPriority :charge-point-id="props.chargePointId" />
-      </div>
+    </q-card-section>
+    <q-card-section class="row items-center q-mt-sm">
+      <ChargePointVehicleSelect
+        :charge-point-id="Number(props.chargePointId)"
+      />
+      <ChargePointPriority :charge-point-id="props.chargePointId" />
+    </q-card-section>
+    <q-card-section>
       <ChargePointModeButtons :charge-point-id="props.chargePointId" />
-      <div class="row q-mt-sm">
-        <div class="col">
-          <div class="text-subtitle2">Leistung</div>
-          <div class="col no-wrap">
-            <ChargePointPowerData
-              :power="power"
-              :phase-number="phaseNumber"
-              :current="chargingCurrent"
-            />
-          </div>
-        </div>
-        <div class="col text-right">
-          <div class="text-subtitle2">geladen</div>
-          {{ energyChargedPlugged }}
+    </q-card-section>
+    <q-card-section class="row q-mt-sm">
+      <div class="col">
+        <div class="text-subtitle2">Leistung</div>
+        <div class="col no-wrap">
+          <ChargePointPowerData
+            :power="power"
+            :phase-number="phaseNumber"
+            :current="chargingCurrent"
+          />
         </div>
       </div>
+      <div class="col text-right">
+        <div class="text-subtitle2">geladen</div>
+        {{ energyChargedPlugged }}
+      </div>
+    </q-card-section>
+    <q-card-section>
       <SliderDouble
         v-if="showSocTargetSlider"
         class="q-mt-sm"
@@ -292,4 +297,26 @@ onMounted(() => {
 .card-width {
   width: 22em;
 }
+
+.q-card__section {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.q-card__section:first-of-type {
+  padding-top: 16px;
+  padding-bottom: 0;
+}
+
+.q-card__section:last-of-type {
+  padding-top: 0;
+  padding-bottom: 16px;
+}
+
+.q-card__section:not(:first-of-type):not(:last-of-type) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 </style>

From 1d4c0f5fb1fd26170b78a93507a6e1b15b166b5f Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 25 Jul 2025 14:49:17 +0200
Subject: [PATCH 2/5] Add ellipsis CSS to card name to prevent overflow

---
 .../koala/source/src/components/ChargePointCard.vue      | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 54c2adf335..04021fa33a 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,6 +1,6 @@
 <template>
   <q-card ref="cardRef" class="full-height card-width">
-    <q-card-section class="row justify-between text-h6 text-bold">
+    <q-card-section class="row justify-between text-h6 text-bold ellipsis" :title="name">
       {{ name }}
     </q-card-section>
     <q-separator inset />
@@ -319,4 +319,11 @@ onMounted(() => {
   padding-top: 0;
   padding-bottom: 0;
 }
+
+.ellipsis {
+  display: inline-block;
+  max-width: 310px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>

From be830008b40f7ae3e394137d31cde544281b2d02 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Fri, 25 Jul 2025 14:52:50 +0200
Subject: [PATCH 3/5] formatting

---
 .../koala/source/src/components/ChargePointCard.vue          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 04021fa33a..2706c20208 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,6 +1,9 @@
 <template>
   <q-card ref="cardRef" class="full-height card-width">
-    <q-card-section class="row justify-between text-h6 text-bold ellipsis" :title="name">
+    <q-card-section
+      class="row justify-between text-h6 text-bold ellipsis"
+      :title="name"
+    >
       {{ name }}
     </q-card-section>
     <q-separator inset />

From ed8b806ef217627a6fdea26a6f01a77e7168219e Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 28 Jul 2025 08:48:16 +0200
Subject: [PATCH 4/5] Title width

---
 .../koala/source/src/components/ChargePointCard.vue         | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 2706c20208..515478f54e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,7 +1,7 @@
 <template>
   <q-card ref="cardRef" class="full-height card-width">
     <q-card-section
-      class="row justify-between text-h6 text-bold ellipsis"
+      class="row justify-between text-h6 text-bold ellipsis max-width"
       :title="name"
     >
       {{ name }}
@@ -323,10 +323,8 @@ onMounted(() => {
   padding-bottom: 0;
 }
 
-.ellipsis {
+.max-width {
   display: inline-block;
   max-width: 310px;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 </style>

From 24efc92a581cc6c47926c6c8e7aedcef70b361ee Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 28 Jul 2025 09:07:06 +0200
Subject: [PATCH 5/5] Fix title css

---
 .../koala/source/src/components/ChargePointCard.vue        | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 515478f54e..7a61b92770 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,7 +1,7 @@
 <template>
   <q-card ref="cardRef" class="full-height card-width">
     <q-card-section
-      class="row justify-between text-h6 text-bold ellipsis max-width"
+      class="justify-between text-h6 text-bold ellipsis"
       :title="name"
     >
       {{ name }}
@@ -322,9 +322,4 @@ onMounted(() => {
   padding-top: 0;
   padding-bottom: 0;
 }
-
-.max-width {
-  display: inline-block;
-  max-width: 310px;
-}
 </style>