From c63085548339556d66ced562e9649a84d0544ff4 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Sun, 3 Mar 2024 12:06:41 +0100
Subject: [PATCH] fix(ui): ensure the tool bar is sized at 100% width
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 ui/web/src/App.vue                             | 5 ++---
 ui/web/src/components/buttons/Button.vue       | 1 +
 ui/web/src/components/buttons/ReloadButton.vue | 5 +----
 ui/web/src/views/ChargingStationsView.vue      | 4 ++--
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue
index 48076e62..25aa3a70 100644
--- a/ui/web/src/App.vue
+++ b/ui/web/src/App.vue
@@ -12,8 +12,8 @@ import Container from '@/components/Container.vue'
 <style>
 #app {
   height: fit-content;
-  width: fit-content;
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  width: 100%;
+  font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: flex;
@@ -23,7 +23,6 @@ import Container from '@/components/Container.vue'
 }
 
 #action-container {
-  min-width: max-content;
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/ui/web/src/components/buttons/Button.vue b/ui/web/src/components/buttons/Button.vue
index 303c93f4..9d99cdb4 100644
--- a/ui/web/src/components/buttons/Button.vue
+++ b/ui/web/src/components/buttons/Button.vue
@@ -10,5 +10,6 @@
   flex: auto;
   justify-content: center;
   align-items: center;
+  font: small-caption;
 }
 </style>
diff --git a/ui/web/src/components/buttons/ReloadButton.vue b/ui/web/src/components/buttons/ReloadButton.vue
index b5387045..385e1454 100644
--- a/ui/web/src/components/buttons/ReloadButton.vue
+++ b/ui/web/src/components/buttons/ReloadButton.vue
@@ -23,9 +23,6 @@ defineProps<{
 }
 
 .spin {
-  animation-name: rotation;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
+  animation: rotation 2s linear infinite;
 }
 </style>
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 2b9695e4..6f589ccc 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -305,6 +305,7 @@ const stopSimulator = (): void => {
 #ui-server-selector {
   width: 100%;
   background-color: rgb(239, 239, 239);
+  font: small-caption;
   text-align: center;
 }
 
@@ -334,8 +335,7 @@ const stopSimulator = (): void => {
 #reload-button {
   color: ivory;
   background-color: blue;
-  font-size: 1.5rem;
-  font-weight: bold;
+  font-size: 2rem;
 }
 
 #reload-button:hover {
-- 
2.34.1