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

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 1fb4031e8340991b6c01099ed6c007018c6621c4..4cb0c93e82d2ada28022fcd66b43dc511e496c06 100644 (file)
--- 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 9fc1edad3bb82306d01cf1c6aacf1a8293ddc73c..a74da37ae7d22b35f0125d2bd03d9169f72bbf20 100644 (file)
--- 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;