From eb0b77a430a39fd0a32e74da45f74e9d18ef0db4 Mon Sep 17 00:00:00 2001
From: Florian Bezannier <florian.bezannier@hotmail.fr>
Date: Sun, 22 Mar 2026 17:40:45 +0100
Subject: [PATCH] fix: resolve UI regressions after Dash 4.0 and Bootstrap 5
 updates

---
 psa_car_controller/web/tools/utils.py       | 2 +-
 psa_car_controller/web/view/config_oauth.py | 2 +-
 psa_car_controller/web/view/config_views.py | 8 ++++----
 psa_car_controller/web/view/views.py        | 8 ++++----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/psa_car_controller/web/tools/utils.py b/psa_car_controller/web/tools/utils.py
index 9e5d8e9..27e08e6 100644
--- a/psa_car_controller/web/tools/utils.py
+++ b/psa_car_controller/web/tools/utils.py
@@ -37,7 +37,7 @@ def get_marks_from_start_end(start, end):
 
 
 def card_value_div(card_id, unit, value="-"):
-    return html.Div([html.Div(value, id=card_id, className="mr-2"), html.Div(unit)],
+    return html.Div([html.Div(value, id=card_id, className="me-2"), html.Div(unit)],
                     className="d-flex flex-row justify-content-center")
 
 
diff --git a/psa_car_controller/web/view/config_oauth.py b/psa_car_controller/web/view/config_oauth.py
index a7c17a8..2b6b00b 100644
--- a/psa_car_controller/web/view/config_oauth.py
+++ b/psa_car_controller/web/view/config_oauth.py
@@ -29,7 +29,7 @@ def get_oauth_config_layout(redirect_url):
                        href="https://github.com/flobz/psa_car_controller/discussions/779"), html.Br()]
             )),
             dbc.Form([
-                html.Div([
+                html.Div(className="mb-3", children=[
                     dbc.Label("Code", html_for="psa-oauth-code"),
                     dbc.Input(type="text", id="psa-oauth-code", placeholder="Enter login code"),
                     dbc.FormText(
diff --git a/psa_car_controller/web/view/config_views.py b/psa_car_controller/web/view/config_views.py
index 1b1fa5e..226abb4 100644
--- a/psa_car_controller/web/view/config_views.py
+++ b/psa_car_controller/web/view/config_views.py
@@ -23,7 +23,7 @@ setup_config_layout = dbc.Row(dbc.Col(md=12, lg=2, className="m-3", children=[
     dbc.Row(html.H2('Config')),
     dbc.Row(className="ms-2", children=[
         dbc.Form([
-            html.Div([
+            html.Div(className="mb-3", children=[
                 dbc.Label("Car Brand", html_for="psa-app"),
                 dcc.Dropdown(
                     id="psa-app",
@@ -35,14 +35,14 @@ setup_config_layout = dbc.Row(dbc.Col(md=12, lg=2, className="m-3", children=[
                         {"label": "Vauxhall", "value": "com.psa.mym.myvauxhall"}
                     ],
                 )]),
-            html.Div([
+            html.Div(className="mb-3", children=[
                 dbc.Label("Email", html_for="psa-email"),
                 dbc.Input(type="email", id="psa-email", placeholder="Enter email"),
                 dbc.FormText(
                     "PSA account email",
                     color="secondary",
                 )]),
-            html.Div([
+            html.Div(className="mb-3", children=[
                 dbc.Label("Password", html_for="psa-password"),
                 dbc.Input(
                     type="password",
@@ -53,7 +53,7 @@ setup_config_layout = dbc.Row(dbc.Col(md=12, lg=2, className="m-3", children=[
                     "PSA account password",
                     color="secondary",
                 )]),
-            html.Div([
+            html.Div(className="mb-3", children=[
                 dbc.Label("Country code", html_for="countrycode"),
                 dbc.Input(
                     type="text",
diff --git a/psa_car_controller/web/view/views.py b/psa_car_controller/web/view/views.py
index 67b0a76..11127e0 100644
--- a/psa_car_controller/web/view/views.py
+++ b/psa_car_controller/web/view/views.py
@@ -293,7 +293,7 @@ def serve_layout():
                                         id="loading-div-trips",
                                         children=[html.Div([html.Div(id="loading-output-trips")])],
                                         type="circle",
-                                        className="export-load-anim"
+                                        parent_className="export-load-anim"
                                     ),
                                     dbc.Button("Export trips data",
                                                id="export-trips-table",
@@ -314,7 +314,7 @@ def serve_layout():
                                     dbc.ModalFooter(
                                         dbc.Button("Close",
                                                    id="tab_trips_popup-close",
-                                                   className="ml-auto")
+                                                   className="ms-auto")
                                     ),
                                 ],
                                 id="tab_trips_popup",
@@ -328,7 +328,7 @@ def serve_layout():
                                         id="loading-div-battery",
                                         children=[html.Div([html.Div(id="loading-output-battery")])],
                                         type="circle",
-                                        className="export-load-anim"
+                                        parent_className="export-load-anim"
                                     ),
                                     dbc.Button("Export charging data",
                                                id="export-battery-table",
@@ -350,7 +350,7 @@ def serve_layout():
                                     dbc.ModalFooter(
                                         dbc.Button("Close",
                                                    id="tab_battery_popup-close",
-                                                   className="ml-auto")
+                                                   className="ms-auto")
                                     ),
                                 ],
                                 id="tab_battery_popup",