style: update expanded BLI row on portfolio and CAN spending page

[weimiao67]

What changed

Updated the layout of the expanded BLI row on the portfolio and CAN spending page.

Issue

#5460
#5485

How to test

1. goto portfolio spending tab and CAN spending tab
2. verify the expanded row has the correct data and layout

A11y impact

• No accessibility-impacting changes in this PR
• Accessibility changes included and validated against WCAG 2.1 AA intent
• Any temporary suppression includes A11Y-SUPPRESSION metadata (owner, expires, rationale)

Screenshots

Definition of Done Checklist

• OESA: Code refactored for clarity
• OESA: Dependency rules followed
• Automated unit tests updated and passed
• Automated integration tests updated and passed
• Automated quality tests updated and passed
• Automated load tests updated and passed
• Automated a11y tests updated and passed
• Automated security tests updated and passed
• 90%+ Code coverage achieved
• [-] Form validations updated

[Copilot]

Pull request overview

This PR updates the expanded-row layout for budget line items shown in the CAN/Portfolio spending tables, switching the expanded content from a flex + manual spacing approach to a USWDS grid-based layout.

Changes:

• Refactored the expanded-row markup to use grid-row / grid-col* for more consistent alignment.
• Reorganized the expanded-row fields into discrete grid columns (Created By, Description, Procurement Shop, SubTotal, Fees).

---

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

[fpigeonjr]

Based on my review, I'm approving this PR with the following summary:

APPROVE ✅
Summary
PR #5490 makes a clean, focused layout refactor for the expanded budget line item row on portfolio and CAN spending pages.
What Changed

• Converted the expanded row layout from manual flexbox with hardcoded pixel margins (marginLeft: "9.0625rem", marginLeft: "15rem") to a USWDS grid-based approach using grid-row, grid-gap-4, and grid-col-* classes
• Simplified markup structure by flattening nested divs
• No functional changes—purely layout/styling improvements
  Verification
• ✅ Unit tests pass (2/2 for CANBudgetLineTableRow)
• ✅ All 58 CI checks passing (E2E, a11y, CodeQL, etc.)
• ✅ ESLint clean
• ✅ Maintains semantic HTML structure (<dl>/<dt>/<dd>)
• ✅ No prior review concerns required resolution

Recommendation
Approve—this is a low-risk, maintainability-focused improvement that follows USWDS best practices.

---

this review is submitted on behalf of Frank Pigeon Jr. via his coding agent.

[github-actions]

🎉 This PR is included in version 1.359.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀