fix: better behavior with adaptive font size

Author: edisile

static/sass/_snapcraft_snap-details.scss

@@ -106,4 +106,39 @@
       opacity: 0.3;
     }
   }
+
+  .p-package-header {
+    container: pkgname / inline-size;
+
+    &__name {
+      display: inline-block;
+      white-space: nowrap;
+
+      .p-tooltip__message {
+        font-weight: 400;
+      }
+
+      --length: 40; // default value, it should be overridden via inline styles on the element
+      --fs-ratio: 1.765; // height/width (1rem/1ch) ratio measured in the browser
+      // we take the full width of the container and divide it by the number of characters in the
+      // package name (+2 to account for the parentheses): this is the horizontal space that each
+      // character has on average; we multiply this by the fs-ratio to get the font size
+      --target-font-size: calc(
+        (100cqw / (2 + var(--length))) * var(--fs-ratio)
+      );
+      // we limit the font size to the smallest and largest available sizes
+      --max-font-size: #{map-get($settings-text-h1-mobile, font-size)}rem; // size of the title
+      --min-font-size: #{map-get($settings-text-h5-mobile, font-size)}rem; // smallest size we allow
+      font-size: clamp(
+        var(--min-font-size),
+        var(--target-font-size),
+        var(--max-font-size)
+      );
+
+      @media (min-width: $breakpoint-heading-threshold) {
+        --min-font-size: #{map-get($settings-text-h5, font-size)}rem;
+        --max-font-size: #{map-get($settings-text-h1, font-size)}rem;
+      }
+    }
+  }
 }

templates/store/package_header/_package_header_data.html

@@ -39,16 +39,16 @@
     developer_validation,
     STAR_DEVELOPER,
     VERIFIED_PUBLISHER) -%}
-  <div class="p-section--shallow">
+  <div class="p-section--shallow p-package-header">
     <h1 class="u-sv-1" data-live="title">
       {{ package_title }}
 
       {# check if the package title could be misleading #}
       {% if package_title.replace(" ", "-").lower() != package_name %}
-        <span class="p-heading--5 p-tooltip--btm-center" aria-label='(registered as "{{ package_name }}")'>
-          ({{ package_name }})
-          <span class="p-tooltip__message" style="font-weight: 400">Package name</span>
-        </span>
+      <span class="p-tooltip--btm-center p-package-header__name" style="--length: {{ package_name | length }};" aria-label='(registered as "{{ package_name }}")'>
+        ({{ package_name }})
+        <span class="p-tooltip__message">Package name</span>
+      </span>
       {% endif %}
     </h1>
     <div class="u-hide--medium u-hide--large">