From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Sat, 21 Mar 2026 17:03:40 +0000 (+0100)
Subject: fix(webui): use table-layout fixed so table shrinks with container when action panel... 
X-Git-Tag: v3.2~17
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=d79e71887c9c171fa7b311afa2550db4f473c239;p=e-mobility-charging-stations-simulator.git

fix(webui): use table-layout fixed so table shrinks with container when action panel opens

Replace min-width: 1280px + table-layout: auto with table-layout: fixed.
Auto layout ignores width: 100% and expands based on content, causing
the table to overflow behind the action panel. Fixed layout respects
the container width and distributes columns equally. Add overflow:
hidden on charging-stations-container as belt-and-suspenders clip.
---

diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index 1fb4031e..4cb0c93e 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -125,7 +125,7 @@ const $emit = defineEmits(['need-refresh'])
 
 .cs-table {
   width: 100%;
-  min-width: 1280px;
+  table-layout: fixed;
   background-color: var(--color-bg-surface);
   border: solid 0.25px var(--color-border);
   border-collapse: collapse;
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 9fc1edad..a74da37a 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -345,6 +345,7 @@ const stopSimulator = (): void => {
 <style scoped>
 .charging-stations-container {
   min-width: 0;
+  overflow: hidden;
   height: fit-content;
   display: flex;
   flex-direction: column;