From 6c68ec659f4d128c110837a4d6c0d2abd5e6f17e Mon Sep 17 00:00:00 2001
From: "amaury.zarzelli" <amaury.zarzelli@ign.fr>
Date: Wed, 2 Oct 2024 11:30:08 +0200
Subject: [PATCH] fix(big-fonts): display issues

---
 src/css/index.css         | 12 ++++++++----
 src/css/nav.css           |  1 +
 src/css/poi.css           |  2 +-
 src/css/route-draw.css    |  2 ++
 src/js/event-listeners.js |  6 ++++--
 src/js/index.js           |  6 ++++--
 6 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/css/index.css b/src/css/index.css
index b74b0f0e..5940fca9 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -40,6 +40,10 @@
     to { opacity: 1; }
 }
 
+:root {
+  --text-zoom: 1;
+}
+
 * {
   -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
   overscroll-behavior: none;
@@ -184,14 +188,14 @@ textarea:focus + .dsign-form-label {
 
 .toggleSlider::after {
   content: "1 0";
-  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 36px;
   height: 21px;
-  line-height: 21px;
   color: var(--black);
-  font-size: 12px;
+  font-size: calc(12px / var(--text-zoom));
   font-family: "Open Sans Semibold";
-  text-align: center;
   word-spacing: 6px;
 }
 
diff --git a/src/css/nav.css b/src/css/nav.css
index c2b95008..763b8ded 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -29,6 +29,7 @@
     align-items: center;
     height: 64px;
     justify-content: center;
+    padding: 0;
 }
 
 .navitembtn > span {
diff --git a/src/css/poi.css b/src/css/poi.css
index 29cc288c..1918d088 100644
--- a/src/css/poi.css
+++ b/src/css/poi.css
@@ -47,7 +47,7 @@
 .divPOIDisplayGoBackTime > span:last-child {
     padding-left: 28px;
     margin-top: 8px;
-    max-width: 65%;
+    max-width: 90%;
     background-image: url("assets/comparePoi.svg");
     background-repeat: no-repeat;
     background-size: 18px;
diff --git a/src/css/route-draw.css b/src/css/route-draw.css
index 1a1859b7..db3a3a4e 100644
--- a/src/css/route-draw.css
+++ b/src/css/route-draw.css
@@ -22,6 +22,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap-reverse;
+  row-gap: 15px;
 }
 
 #routeDrawMode {
diff --git a/src/js/event-listeners.js b/src/js/event-listeners.js
index 4c23b42b..ddcae718 100644
--- a/src/js/event-listeners.js
+++ b/src/js/event-listeners.js
@@ -270,10 +270,12 @@ function addListeners() {
       return;
     }
     TextZoom.getPreferred().then(value => {
+      const newValue = Math.min(1.5, value.value);
       TextZoom.set({
-        value: Math.min(1.5, value.value)
+        value: newValue
       });
-      document.documentElement.style.fontSize = `calc(13px * ${value.value})`;
+      document.documentElement.style.fontSize = `calc(13px * ${newValue})`;
+      document.documentElement.style.setProperty("--text-zoom", newValue);
     });
   });
 
diff --git a/src/js/index.js b/src/js/index.js
index 26a1ee15..b5d6f66a 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -103,10 +103,12 @@ function app() {
     }, 500);
     if (Capacitor.getPlatform() !== "web") {
       TextZoom.getPreferred().then(value => {
+        const newValue = Math.min(1.5, value.value);
         TextZoom.set({
-          value: Math.min(1.5, value.value)
+          value: newValue
         });
-        document.documentElement.style.fontSize = `calc(13px * ${value.value})`;
+        document.documentElement.style.fontSize = `calc(13px * ${newValue})`;
+        document.documentElement.style.setProperty("--text-zoom", newValue);
       });
     }
     if (!localStorage.getItem("hasBeenLaunched")) {