Package name in sidebar (and also near the title, if necessary)

static/sass/_snapcraft_snap-details.scss

@@ -106,4 +106,49 @@
       opacity: 0.3;
     }
   }
+
+  .p-package-header {
+    container: pkgname / inline-size;
+
+    &__name {
+      // package name string length; 40 is the maximum length the store backend
+      // supports and this is just a default value, it should be overridden via inline styles on
+      // the element
+      --length: 40;
+
+      // font size/character width (1rem/1ch) ratio, a magic number
+      // measured in the browser
+      --fs-width-ratio: 1.77;
+
+      // we take the full width of the container (100cqw) 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 will use on average; we multiply this by the font size/character
+      // width ratio to get the font size
+      --target-font-size: calc(
+        (100cqw / (2 + var(--length))) * var(--fs-width-ratio)
+      );
+
+      // we limit the actual font size value to the smallest and largest heading font sizes
+      --font-size: clamp(
+        var(--min-font-size),
+        var(--target-font-size),
+        var(--max-font-size)
+      );
+      --min-font-size: #{map-get($settings-text-h6-mobile, font-size)}rem;
+      --max-font-size: #{map-get($settings-text-h1-mobile, font-size)}rem;
+
+      @media (min-width: $breakpoint-heading-threshold) {
+        --min-font-size: #{map-get($settings-text-h6, font-size)}rem;
+        --max-font-size: #{map-get($settings-text-h1, font-size)}rem;
+      }
+
+      display: inline-block;
+      font-size: var(--font-size);
+      white-space: nowrap;
+
+      .p-tooltip__message {
+        font-weight: 400;
+      }
+    }
+  }
 }

templates/store/package_header/_package_header.html

@@ -3,6 +3,7 @@
 
 Snap data:
   snap_title: Title of the snap
+  package_name: the name of the snap (the one you'd type to install it through the CLI)
   icon_url: URL of the icon
   categories: List of categories with slug/name
 
@@ -30,6 +31,7 @@
     </div>
     <div class="grid-col-6 grid-col-medium-3 grid-col-small-3">
       {{ package_header_data(package_title=snap_title,
+          package_name=package_name,
           icon_url=icon_url,
           developer=developer,
           categories=categories,

templates/store/package_header/_package_header_data.html

@@ -28,6 +28,7 @@
 
 {%- macro package_header_data(
     package_title,
+    package_name,
     icon_url,
     developer,
     categories,
@@ -38,8 +39,18 @@
     developer_validation,
     STAR_DEVELOPER,
     VERIFIED_PUBLISHER) -%}
-  <div class="p-section--shallow">
-    <h1 class="u-sv-1" data-live="title">{{ package_title }}</h1>
+  <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-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">
       {% if developer %}
         {{ developer_info(name=developer[0], url=developer[1]) }}

templates/store/snap-details/_details.html

@@ -1,5 +1,11 @@
 <h2 class="u-off-screen">Details for {{ snap_title }}</h2>
 
+<h3 class="p-muted-heading">Package name</h3>
+<ul class="p-list">
+  <li>{{ package_name }}</li>
+</ul>
+<hr class="p-rule--muted">
+
 <h3 class="p-muted-heading">License</h3>
 <ul class="p-list">
   <li>{{ license }}</li>