From dfb2a4a78130a75b3ac3be68d52016b847209a90 Mon Sep 17 00:00:00 2001
From: Alexander Minges <alexander.minges@gmail.com>
Date: Thu, 17 Jul 2025 19:40:25 +0200
Subject: [PATCH] feat(ui): use CSS container queries for precise header font
 scaling

---
 scss/components/actor/_actor_header.scss | 3 ++-
 scss/components/item/_item_header.scss   | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/scss/components/actor/_actor_header.scss b/scss/components/actor/_actor_header.scss
index f0a7e827..ac6142fe 100644
--- a/scss/components/actor/_actor_header.scss
+++ b/scss/components/actor/_actor_header.scss
@@ -42,6 +42,7 @@
     align-items: center;
     border-bottom: 0;
     margin: 0;
+    container-type: inline-size;
   }
 
   &__name-input[type="text"] {
@@ -49,7 +50,7 @@
     background-color: transparent;
     border: none;
     flex: 1;
-    font-size: clamp(0.75em, 2.5vw, 1.25em);
+    font-size: clamp(0.75em, 8cqi, 1.25em);
     height: auto;
 
     // Use lighter font weight for better readability
diff --git a/scss/components/item/_item_header.scss b/scss/components/item/_item_header.scss
index 923fdb71..1a22436f 100644
--- a/scss/components/item/_item_header.scss
+++ b/scss/components/item/_item_header.scss
@@ -33,6 +33,7 @@
   &__name {
     border: none;
     margin: 0;
+    container-type: inline-size;
   }
 
   &__name-label {
@@ -43,7 +44,7 @@
     @include mixins.font-heading-upper;
     background-color: transparent;
     border: none;
-    font-size: clamp(0.75em, 2.5vw, 1.25em);
+    font-size: clamp(0.75em, 8cqi, 1.25em);
     height: auto;
     padding-left: 0;
     padding-right: 0;