<!-- Add the related story/sub-task/bug number, like Resolves#123, or
remove if NA -->
**Related issue:** Resolves#46973
> **Draft:** on-device QA (Mac/iPhone/iPad) is pending hardware,
expected next week. Opening as draft for early review of the approach.
## Description
FMA and custom-package app icons were misaligned on the macOS setup
experience ("Setting up your device") screen — icons rendered at
different sizes and their "Install …" labels didn't line up.
**Root cause:** `SetupSoftwareProcessCell` forced `.software-icon__small
{ width: $pad-xlarge }` (32px, width only). That class lands on
different elements in `SoftwareIcon`'s two render paths, so it hit them
differently:
- **Fleet-maintained / VPP apps (icon URL)** → the class is on the
wrapper `<div>`; the 24px `<img>` inside stayed 24px, left-aligned.
- **Custom packages (no URL)** → the class is on the fallback **SVG**
itself, which got stretched to 32px wide.
Result: different icon sizes/positions by app type → the misalignment.
**Fix:** remove the width override so every app type renders
`SoftwareIcon` at its consistent, vertically-centered 24px "small" size.
## Testing
Verified in Storybook (added `SetupSoftwareProcessCell.stories.tsx`,
`MixedAlignment` story) with real matched brand icons (Chrome,
1Password, VS Code, Zoom), a generic custom-package icon, and a
URL/`<img>` icon stacked together:
- **Before** (with the override): icons render at mixed 24/32px sizes;
"Install …" labels don't align.
<img width="1135" height="398" alt="before"
src="https://github.com/user-attachments/assets/fe216ab4-0a7b-4211-b8aa-96e65e6ca3f5"
/>
- **After** (this change): all icons render at 24px, centered, labels
aligned.
<img width="1185" height="425" alt="after"
src="https://github.com/user-attachments/assets/28257eb8-df6e-4168-a0bb-28dda4bb40ba"
/>
On-device QA to follow once hardware is available.
## Notes for reviewer
- The `width: $pad-xlarge` (32px) was added in #33770, so 32px may have
been the *intended* icon size. This change makes them a consistent
**24px**. If a larger icon is desired, that's a follow-up done properly
via a real `SoftwareIcon` size (not a width-only override) — flagging
for PD input since this is `:product`-labeled.
- Included a Storybook story for visual verification/regression; happy
to drop it if that's not wanted here.
# Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files)
for more information.
## Testing
- [ ] QA'd all new/changed functionality manually <!-- pending on-device
QA -->
- Added a Storybook story for visual verification (not an automated
test).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved software process cell styling for more consistent icon sizing
and alignment.
* **Tests**
* Added Storybook scenarios covering fleet-maintained apps, custom
packages, uploaded icons, and mixed app layouts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Rajendra Kadam
17669eca02