feat(ui): use CSS container queries for precise header font scaling

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: 1.25em;
+    font-size: clamp(0.75em, 8cqi, 1.25em);
     height: auto;
 
     // Use lighter font weight for better readability

scss/components/item/_item_header.scss

@@ -33,6 +33,7 @@
   &__name {
     border: none;
     margin: 0;
+    container-type: inline-size;
   }
 
   &__name-label {
@@ -43,12 +44,10 @@
     @include mixins.font-heading-upper;
     background-color: transparent;
     border: none;
-    font-size: 1.25em;
+    font-size: clamp(0.75em, 8cqi, 1.25em);
     height: auto;
     padding-left: 0;
     padding-right: 0;
-
-    // Use lighter font weight for better readability
     font-weight: 300;
   }
 }