Add icons to collapsed buttons inside dropdowns

[gesquivelgaghi]

Summary

Added icons to the buttons inside the dropdown of ResponsiveButtons

Release Impact

According to the Landscape Server Release Cycle, this change will target the following release cycle:

• Target Branch: main (Beta)
• Version Impact:
  • Patch (Fix)
  • Minor (Feature)
  • Major (Breaking)

Checklist

• Changeset Added: I have run pnpm changeset and committed the resulting .md file.
• UI Verified: I have verified the changes locally.
• Linting: No linting errors are present (especially in scripts/).

Versioning Reminder

Important

This repository now uses CalVer ($YY.0M.Point.Patch$).
Please ensure your changeset description is clear, as it will be automatically added to the CHANGELOG.md upon merging to main.

UI Changes

Before:

After:

[Copilot]

Pull request overview

Adds icon support for actions that are collapsed into the ResponsiveButtons dropdown so dropdown items can render the same icon+label content as the original buttons.

Changes:

• Introduce hasIcon?: boolean plumbing through ResponsiveButtons so collapsed menu items can be styled correctly when they include icons.
• Preserve original button children when collapsing actions, enabling icon+label nodes to render inside dropdown items.
• Update several action button groups (snaps, packages, instances) to set hasIcon so their collapsed dropdown items render with icons.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/features/snaps/components/SnapsActions/SnapsActions.tsx	Marks snap action buttons with hasIcon so collapsed dropdown entries render with icon styling.
src/features/packages/components/PackageActions/PackageActions.tsx	Marks package action buttons with hasIcon for icon-aware collapsed rendering.
src/features/instances/components/InstancesPageActions/InstancesPageActions.tsx	Adds icons/hasIcon to instance action buttons and updates Pro token action labeling logic.
src/components/ui/ResponsiveButtons/types.ts	Extends button-like props to optionally carry hasIcon.
src/components/ui/ResponsiveButtons/ResponsiveButtons.tsx	Propagates hasIcon and preserves original children for collapsed items so icons can render in the dropdown.
.changeset/fluffy-hotels-divide.md	Adds a patch changeset describing the UI fix.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[rubinaga]

@gesquivelgaghi I think it would be nice if the chevron was "chevron left" here and in line with the other icons (on the left). What do you think?

[gesquivelgaghi]

@rubinaga the reason I left it as is, is because it the dropdown options are about to change to these:

where no options will have icons, and when the buttons are collapsed, they'll all have the chevron at the end of the right side. I don't know about changing the chevron because that's the standard for all our button dropdowns, so if we were to change it we would lose that UI consistency. But the dropdown itself will open on the left side if there's not enough space on the right, like so:

[rubinaga]

@gesquivelgaghi won't that somehow be a bit worse in that case when all are combined under "Actions"? because the chevron will be pointing to the right, but there will never be space to be opened to the right so they always will end up left. I think this pattern is only in this "Instances page" in the "actions", and in the "filters" so I don't think we have a set pattern in the project yet. I don't think its a big deal if one points left and the other right but could be worth bringing up with Dani I guess