From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Fri, 20 Mar 2026 19:00:23 +0000 (+0100)
Subject: refactor(webui): restore native table layout to fix column overlap on action panel... 
X-Git-Tag: ocpp-server@v3.2.0~19
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=3970d2c7149972b97af404c401eebb7bbcf340d2;p=e-mobility-charging-stations-simulator.git

refactor(webui): restore native table layout to fix column overlap on action panel open

Replace display:flex overrides on <table>/<tr>/<td> with native HTML table
layout. Add overflow-x:auto wrapper with min-width floor so columns scroll
horizontally instead of compressing and overlapping when the action panel
reduces available width.
---

diff --git a/ui/web/src/components/buttons/Button.vue b/ui/web/src/components/buttons/Button.vue
index 708d6c44..b84c1423 100644
--- a/ui/web/src/components/buttons/Button.vue
+++ b/ui/web/src/components/buttons/Button.vue
@@ -9,10 +9,10 @@
 
 <style>
 .button {
-  display: flex;
+  display: block;
   flex: auto;
-  justify-content: center;
-  align-items: center;
+  width: 100%;
+  text-align: center;
   font: small-caption;
 }
 </style>
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 7d1f4ce3..53703a64 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -72,7 +72,6 @@
     </td>
     <td class="cs-table__connectors-column">
       <table id="connectors-table">
-        <caption />
         <thead id="connectors-table__head">
           <tr class="connectors-table__row">
             <th
@@ -265,24 +264,13 @@ const deleteChargingStation = (): void => {
 
 <style>
 #connectors-table {
-  display: flex;
-  flex-direction: column;
+  width: 100%;
   background-color: var(--color-bg-surface);
-  overflow: auto hidden;
   border-collapse: collapse;
   empty-cells: show;
 }
 
-#connectors-table__body {
-  display: flex;
-  flex-direction: column;
-}
-
 .connectors-table__row {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
   border: solid 0.25px var(--color-border-row);
 }
 
@@ -295,9 +283,8 @@ const deleteChargingStation = (): void => {
 }
 
 .connectors-table__column {
-  width: calc(100% / 5);
-  display: flex;
-  flex-direction: column;
   text-align: center;
+  vertical-align: middle;
+  padding: 0.25rem;
 }
 </style>
diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index 3ed3b6b8..bc887dfe 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -1,93 +1,109 @@
 <template>
-  <table id="cs-table">
-    <caption id="cs-table__caption">
-      Charging Stations
-    </caption>
-    <thead id="cs-table__head">
-      <tr class="cs-table__row">
-        <th
-          class="cs-table__column"
-          scope="col"
-        >
-          Name
-        </th>
-        <th
-          class="cs-table__column"
-          scope="col"
-        >
-          Started
-        </th>
-        <th
-          class="cs-table__column"
-          scope="col"
-        >
-          Supervision Url
-        </th>
-        <th
-          class="cs-table__column"
-          scope="col"
-        >
-          WebSocket State
-        </th>
-        <th
-          class="cs-table__column"
-          scope="col"
-        >
-          Registration Status
-        </th>
-        <th
-          class="cs-table__column"
-          scope="col"
-        >
-          OCPP Version
-        </th>
-        <th
-          class="cs-table__column"
-          scope="col"
-        >
-          Template
-        </th>
-        <th
-          class="cs-table__column"
-          scope="col"
-        >
-          Vendor
-        </th>
-        <th
-          class="cs-table__column"
-          scope="col"
-        >
-          Model
-        </th>
-        <th
-          class="cs-table__column"
-          scope="col"
-        >
-          Firmware
-        </th>
-        <th
-          class="cs-table__column"
-          scope="col"
-        >
-          Actions
-        </th>
-        <th
-          class="cs-table__connectors-column"
-          scope="col"
-        >
-          Connector(s)
-        </th>
-      </tr>
-    </thead>
-    <tbody id="cs-table__body">
-      <CSData
-        v-for="chargingStation in chargingStations"
-        :key="chargingStation.stationInfo.hashId"
-        :charging-station="chargingStation"
-        @need-refresh="$emit('need-refresh')"
-      />
-    </tbody>
-  </table>
+  <div class="cs-table__wrapper">
+    <table id="cs-table">
+      <caption id="cs-table__caption">
+        Charging Stations
+      </caption>
+      <colgroup>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col>
+        <col class="cs-table__col--connectors">
+      </colgroup>
+      <thead id="cs-table__head">
+        <tr class="cs-table__row">
+          <th
+            class="cs-table__column"
+            scope="col"
+          >
+            Name
+          </th>
+          <th
+            class="cs-table__column"
+            scope="col"
+          >
+            Started
+          </th>
+          <th
+            class="cs-table__column"
+            scope="col"
+          >
+            Supervision Url
+          </th>
+          <th
+            class="cs-table__column"
+            scope="col"
+          >
+            WebSocket State
+          </th>
+          <th
+            class="cs-table__column"
+            scope="col"
+          >
+            Registration Status
+          </th>
+          <th
+            class="cs-table__column"
+            scope="col"
+          >
+            OCPP Version
+          </th>
+          <th
+            class="cs-table__column"
+            scope="col"
+          >
+            Template
+          </th>
+          <th
+            class="cs-table__column"
+            scope="col"
+          >
+            Vendor
+          </th>
+          <th
+            class="cs-table__column"
+            scope="col"
+          >
+            Model
+          </th>
+          <th
+            class="cs-table__column"
+            scope="col"
+          >
+            Firmware
+          </th>
+          <th
+            class="cs-table__column"
+            scope="col"
+          >
+            Actions
+          </th>
+          <th
+            class="cs-table__connectors-column"
+            scope="col"
+          >
+            Connector(s)
+          </th>
+        </tr>
+      </thead>
+      <tbody id="cs-table__body">
+        <CSData
+          v-for="chargingStation in chargingStations"
+          :key="chargingStation.stationInfo.hashId"
+          :charging-station="chargingStation"
+          @need-refresh="$emit('need-refresh')"
+        />
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -103,25 +119,19 @@ const $emit = defineEmits(['need-refresh'])
 </script>
 
 <style>
+.cs-table__wrapper {
+  overflow-x: auto;
+}
+
 #cs-table {
-  height: fit-content;
   width: 100%;
+  min-width: 1280px;
   background-color: var(--color-bg-surface);
-  display: flex;
-  flex-direction: column;
-  overflow: auto hidden;
   border: solid 0.25px var(--color-border);
   border-collapse: collapse;
   empty-cells: show;
 }
 
-#cs-table__body {
-  height: fit-content;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 #cs-table__caption {
   color: var(--color-text-strong);
   background-color: var(--color-bg-caption);
@@ -131,12 +141,6 @@ const $emit = defineEmits(['need-refresh'])
 }
 
 .cs-table__row {
-  height: fit-content;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
   border: solid 0.25px var(--color-border-row);
 }
 
@@ -144,22 +148,23 @@ const $emit = defineEmits(['need-refresh'])
   background-color: var(--color-bg-hover);
 }
 
+#cs-table__head .cs-table__row {
+  background-color: var(--color-bg-header);
+}
+
 .cs-table__column {
-  height: fit-content;
-  width: calc((100% - calc(100% / 3)) / 11);
-  display: flex;
-  flex-direction: column;
   text-align: center;
+  vertical-align: middle;
+  padding: 0.25rem;
+  overflow-wrap: anywhere;
 }
 
-#cs-table__head .cs-table__row {
-  background-color: var(--color-bg-header);
+.cs-table__col--connectors {
+  width: 33%;
 }
 
 .cs-table__connectors-column {
-  height: fit-content;
-  width: calc(100% / 3);
-  display: flex;
-  flex-direction: column;
+  vertical-align: top;
+  padding: 0;
 }
 </style>