From 58e401ba88f91a14b94e0976f9e7b1a251f19480 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Thu, 18 Dec 2025 10:03:00 +0100
Subject: [PATCH] Fix navigation bar font size not relative to root font size
 (#3914)

* Use rem instead of px to make font size relative to root font size

* more precise rem values
---
 src/features/navigation/components/Page.module.css        | 6 +++---
 src/features/navigation/components/PageGroup.module.css   | 8 ++++----
 .../navigation/components/SubformsForPage.module.css      | 6 +++---
 src/features/navigation/components/TaskGroup.module.css   | 4 ++--
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/features/navigation/components/Page.module.css b/src/features/navigation/components/Page.module.css
index 238f29bc8c..9a3b8d2bf9 100644
--- a/src/features/navigation/components/Page.module.css
+++ b/src/features/navigation/components/Page.module.css
@@ -23,7 +23,7 @@
 
 .page-button {
   font-family: var(--font-family);
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: normal;
   color: var(--ds-color-accent-text-subtle);
   background-color: transparent;
@@ -66,14 +66,14 @@
 }
 
 .page-symbol-error {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: var(--ds-color-danger-text-default);
   border-color: var(--ds-color-danger-border-default);
   background-color: var(--ds-color-danger-surface-tinted);
 }
 
 .page-symbol-complete {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: white;
   border-color: var(--ds-color-accent-base-default);
   background-color: var(--ds-color-accent-base-default);
diff --git a/src/features/navigation/components/PageGroup.module.css b/src/features/navigation/components/PageGroup.module.css
index 3feda5bce5..5944fa28a2 100644
--- a/src/features/navigation/components/PageGroup.module.css
+++ b/src/features/navigation/components/PageGroup.module.css
@@ -14,7 +14,7 @@
 
 .group-button {
   font-family: var(--font-family);
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: normal;
   color: var(--ds-color-neutral-text-default);
   background-color: transparent;
@@ -55,7 +55,7 @@
   margin-top: 6px;
   margin-right: -4px; /* The icon has some internal padding, this makes the edge line up better */
   color: var(--ds-color-neutral-text-default);
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .group-chevron-open {
@@ -66,7 +66,7 @@
   width: 28px;
   height: 28px;
   box-sizing: border-box;
-  font-size: 20px;
+  font-size: 1.25rem;
   border-width: 2px;
   border-style: solid;
   border-radius: var(--ds-border-radius-md);
@@ -76,7 +76,7 @@
 }
 
 .group-symbol-single {
-  font-size: 18px;
+  font-size: 1.15rem;
   border-radius: 50%;
   width: 24px;
   height: 24px;
diff --git a/src/features/navigation/components/SubformsForPage.module.css b/src/features/navigation/components/SubformsForPage.module.css
index bc752ea810..69dce55e3d 100644
--- a/src/features/navigation/components/SubformsForPage.module.css
+++ b/src/features/navigation/components/SubformsForPage.module.css
@@ -5,7 +5,7 @@
 
 .subform-expand-button {
   font-family: var(--font-family);
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: normal;
   color: var(--ds-color-neutral-text-subtle);
   background-color: transparent;
@@ -34,7 +34,7 @@
   margin-top: 1px;
   margin-right: -4px; /* The icon has some internal padding, this makes the edge line up better */
   color: var(--ds-color-neutral-text-subtle);
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .subform-expand-chevron-open {
@@ -57,7 +57,7 @@
 .subform-link {
   display: block;
   font-family: var(--font-family);
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: normal;
   color: var(--ds-color-accent-text-subtle);
   background-color: transparent;
diff --git a/src/features/navigation/components/TaskGroup.module.css b/src/features/navigation/components/TaskGroup.module.css
index 165446edd3..b539cbe0dc 100644
--- a/src/features/navigation/components/TaskGroup.module.css
+++ b/src/features/navigation/components/TaskGroup.module.css
@@ -1,6 +1,6 @@
 .task-button {
   font-family: var(--font-family);
-  font-size: 16px;
+  font-size: 1rem;
   background-color: transparent;
   border: none;
   cursor: not-allowed;
@@ -34,7 +34,7 @@
   width: 28px;
   height: 28px;
   box-sizing: border-box;
-  font-size: 20px;
+  font-size: 1.25rem;
   border-width: 2px;
   border-style: solid;
   border-radius: var(--ds-border-radius-md);