From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Sat, 21 Mar 2026 16:23:56 +0000 (+0100)
Subject: fix(webui): prevent action panel flex grow and allow table container to shrink
X-Git-Tag: v3.2~19
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=63e72355f744b2271c48d0178f1af048d28f694b;p=e-mobility-charging-stations-simulator.git

fix(webui): prevent action panel flex grow and allow table container to shrink

Use ID selector on #action-container for higher specificity (1-1-0)
over Container.vue scoped .container (0-2-0), add flex: none to prevent
growing. Add min-width: 0 and remove width: 100% on charging stations
container to allow flex shrink below table content width.
---

diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue
index 7883d52b..0bcfc609 100644
--- a/ui/web/src/App.vue
+++ b/ui/web/src/App.vue
@@ -14,7 +14,8 @@ import Container from '@/components/Container.vue'
 </script>
 
 <style scoped>
-.action-container {
+#action-container {
+  flex: none;
   min-width: max-content;
   height: fit-content;
   display: flex;
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 585e9869..9fc1edad 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -344,8 +344,8 @@ const stopSimulator = (): void => {
 
 <style scoped>
 .charging-stations-container {
+  min-width: 0;
   height: fit-content;
-  width: 100%;
   display: flex;
   flex-direction: column;
 }