Center-align setup experience app icons

[raju249]

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.

• After (this change): all icons render at 24px, centered, labels aligned.

On-device QA to follow once hardware is available.

Notes for reviewer

• The width: $pad-xlarge (32px) was added in Update "Setting up your device" page for MacOS Setup Experience #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

• Changes file added for user-visible changes in changes/.
  See Changes files for more information.

Testing

• QA'd all new/changed functionality manually
• Added a Storybook story for visual verification (not an automated test).

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.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 67.92%. Comparing base (aa572dc) to head (92b686a).
⚠️ Report is 28 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff            @@
##             main   #49962    +/-   ##
========================================
  Coverage   67.92%   67.92%            
========================================
  Files        3905     3919    +14     
  Lines      249676   249664    -12     
  Branches    13350    13178   -172     
========================================
- Hits       169580   169572     -8     
+ Misses      64828    64825     -3     
+ Partials    15268    15267     -1     

Flag	Coverage Δ
frontend	60.40% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 5b07d4b3-ba9c-4999-b9a2-c6637a3f1c25

📥 Commits

Reviewing files that changed from the base of the PR and between 9add93b and 92b686a.

⛔ Files ignored due to path filters (1)

• changes/46973-setup-experience-icon-alignment.md is excluded by !**/*.md

📒 Files selected for processing (2)

• frontend/components/TableContainer/DataTable/SetupSoftwareProcessCell/SetupSoftwareProcessCell.stories.tsx
• frontend/components/TableContainer/DataTable/SetupSoftwareProcessCell/_styles.scss

💤 Files with no reviewable changes (1)

• frontend/components/TableContainer/DataTable/SetupSoftwareProcessCell/_styles.scss

---

Walkthrough

Adds Storybook stories for fleet-maintained apps, custom packages, uploaded icon URLs, and mixed app layouts. The stories provide a shared query client and query client provider. Removes the nested .software-icon__small width override from the setup software process cell styles.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: fixing setup experience app icon alignment.
Description check	✅ Passed	The description follows the template and covers the issue, fix, testing, and checklist sufficiently.
Linked Issues check	✅ Passed	The changes address #46973 by removing the icon width override and adding visual verification for mixed icon types.
Out of Scope Changes check	✅ Passed	No unrelated code changes are evident beyond the icon alignment fix and supporting Storybook story.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 46973-setup-experience-icon-alignment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[MagnusHJensen]

@RachelElysia @cdcme What is your take on adding more storybook components, in this case a bigger piece/page? For a situation like this a bug like this can be fixed without even going through DEP (would be advised for testing still)