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 7883d52ba78f6f86a45190631e8a0cf4a14619d2..0bcfc609bd8446261c497735841572b3cb3f2c8a 100644 (file)
--- 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 585e98690f13a3d4f7aa2bf3b6173b5a80a1970a..9fc1edad3bb82306d01cf1c6aacf1a8293ddc73c 100644 (file)
--- 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;
 }