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

[edisile]

Done

• added package name in details sidebar
• added package name near package title if it differs too much from the name
  • title might be misleading if package_title.replace(" ", "-").lower() != package_name

How to QA

• visit https://snapcraft-io-5602.demos.haus/lxd
  • package title is "LXD"
  • the package name does not appear near the title
• visit https://snapcraft-io-5602.demos.haus/gedit
  • package title is "Text Editor (gedit)"
  • hovering over "(gedit)" displays a tooltip
• visit https://snapcraft-io-5602.demos.haus/test-name-that-is-a-test
  • package title is "looooong package title != package name < line break > (test-name-that-is-a-test)"
  • resize the window, the package name size shrinks

Testing

• This PR has tests
• No testing required (explain why):

Security

• Security considerations for review (list them):
  • Examples:
  • Access control: users can only access their own data
  • Input: user input is validated and sanitised
  • Sensitive data: secret or private data is not exposed in any way
  • ...
• This PR has no security considerations (explain why): this PR doesn't have any impact on the application from a security point of view

Issue / Card

Fixes WD-33034

Screenshots

UX Approval

• This PR does not require UX approval
• This PR does require UX approval (add context):
  The idea behind this change is to mitigate the risk of fraudulent packages: by making it clear when a snap's title and its name don't match, users will hopefully be able to avoid installing malicious snaps.
  To achieve this, adding the package name to the details sidebar is a good first step, but this sidebar isn't always immediately visible on first scroll (e.g. snaps with screenshots/videos), meaning this measure isn't very effective IMO. Adding the package name near the title at the top of the page, on the other hand, makes the mismatch between name and title easier to spot.

Other ideas to consider/explore:

• moving the package name down, putting it on the same line as the publisher info and snap categories
• using some form of string distance to quantify the difference between the package name and package title, adding a warning if it's above a certain threshold
• only showing applying this logic for non-verified publishers

[webteam-app]

Demo

Jenkins

demos.haus

[leiaru-c]

I agree with the rationale of being more explicit with package names that differ too much from their titles, and that it needs to be more visible to help users find clues on whether or not they want to trust that application.
I would recommend making the parentheses content the same size as the main title for a more homogeneous look. There will be issues with headers that are close to the character limits, but I believe that combining a reduced size above 20-ish characters, similar to what we do for smaller screen sizes, and careful line breaks to avoid cutting the content inside the parentheses, it should not create too many legibility issues.

[edisile]

I added some styles to implement an adaptive font size based on the length of the package name; for most snaps the font will be as close as possible to the rest of the title and won't wrap awkwardly anymore, but for those snaps with long names the font will shrink in order to fit the whole name on one line

[Copilot]

Pull request overview

This PR improves snap detail page trust signals by making the registered package name more visible: always in the details sidebar, and conditionally next to the title when the title-to-name normalization suggests they may not match.

Changes:

• Added “Package name” section to the snap details sidebar.
• Passed package_name into the package header macro and conditionally rendered it next to the title with a tooltip when the normalized title differs.
• Added responsive SCSS to scale the displayed package name near the title based on available width.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
templates/store/snap-details/_details.html	Displays the package name in the details sidebar.
templates/store/package_header/_package_header.html	Passes package_name through to the header data macro.
templates/store/package_header/_package_header_data.html	Conditionally renders package name near the H1 with tooltip when title normalization differs.
static/sass/_snapcraft_snap-details.scss	Adds styling/container-query logic to scale the near-title package name.

[abbiesims]

LGTM! 👍