MMI Tweaks After UX Review

[iseabock]

Are you removing, renaming or moving a folder in this PR?

• No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)

⚠️ TeamSites ⚠️

Examples of a TeamSite: https://va.gov/health and https://benefits.va.gov/benefits/. This scenario is also referred to as the "injected" header and footer. You can reach out in the #sitewide-public-websites Slack channel for questions.

Did you change site-wide styles, platform utilities or other infrastructure?

• No

Summary

Multiple UI improvements to the MHV Medications Refill and Medication List pages:

1. Fix refill status link — Updated "Check your refill request status" link from non-functional href="#" to the correct URL (/my-health/medications/refill-status) and shortened text to "Check your refill status"
2. Remove prescription number from refill list — Removed the "Prescription number" line from checkbox descriptions on the refill page to reduce clutter
3. Null state heading level fix — Changed "You don't have any available refills" from <h2> to <h3> for correct heading hierarchy
4. Sort dropdown width — Shortened dropdown to fit-content with max-width: 250px
5. Pagination left-aligned — Changed pagination from centered to left-justified
6. Bold selected filter option — Added a useEffect that bolds the label of the currently selected radio option in the medication list filter panel

• Team: MHV Medications team
• Feature flag: Changes are behind the existing mhvMedicationsManagementImprovements feature flag

Related issue(s)

• department-of-veterans-affairs/va.gov-team#TODO

Testing done

Steps to verify:

1. Start dev server: yarn watch --env entry=mhv-medications
2. Enable feature flag mhvMedicationsManagementImprovements in local mock toggles
3. Navigate to http://localhost:3001/my-health/medications/refill

Refill page checks:

• Verify "Check your refill status" link navigates to /my-health/medications/refill-status
• Verify prescription number is NOT shown in refill checkbox descriptions
• If no refills available, verify "You don't have any available refills" renders as <h3> (inspect element)

4. Navigate to http://localhost:3001/my-health/medications

Medication list page checks:

• Verify "Sort by" label appears inline to the left of the sort dropdown (not stacked above)
• Verify the sort dropdown is narrower (fits content, not full-width)
• Verify pagination is left-aligned (not centered)
• Open the Filter panel, select different filter options, verify the selected radio option label appears bold

Tests completed:

• Manual browser testing in Chrome on macOS
• Keyboard navigation verified for sort dropdown and filter panel
• No console errors or warnings observed

Screenshots

What areas of the site does it impact?

Changes isolated to MHV Medications application:

• Refill page (RefillPrescriptionsV2.jsx)
• Medication list page (MedicationsList.jsx, MedicationsListSort.jsx, MedicationListFilter.jsx)
• Medications SCSS (medications.scss)

Quality Assurance & Testing

• I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
• Linting warnings have been addressed
• Documentation has been updated — N/A, no new documentation needed
• Screenshot of the developed feature is added
• Accessibility testing has been performed

Error Handling

• Browser console contains no warnings or errors.
• Events are being sent to the appropriate logging solution — No new events needed, existing Datadog tracking unchanged
• Feature/bug has a monitor built into Datadog or Grafana (if applicable) — N/A, UI-only changes

Authentication

• Did you login to a local build and verify all authenticated routes work as expected with a test user

Requested Feedback

• The bold filter label uses a useEffect with setTimeout(100ms) to query the DOM after Stencil web components finish rendering. This is because va-radio-option uses scoped CSS that sets font-weight: normal on its internal label, and the component does not expose ::part() selectors. Open to alternative approaches if there's a better pattern for styling Stencil scoped component internals.

[iseabock]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Resolved the merge conflict in medications-non-VA-status-definition-dropdown-details-page.cypress.spec.js (commit a6a0738). The conflict was in the second test — our branch used direct URL navigation with station_number, while main updated it to navigate via the list page with a ?* wildcard intercept pattern. I adopted main's approach since those changes were paired with the details page updates in main.

[Copilot]

Pull request overview

Updates the MHV Medications application UI (refill flow + medications list) following UX review, primarily via link/content tweaks and layout/styling adjustments behind the existing mhvMedicationsManagementImprovements flag.

Changes:

• Updates refill page content (refill status link URL/text, removes prescription number from refill checkbox descriptions, adjusts empty-state heading level).
• Adjusts medications list UI layout/styling (sort dropdown container/width, pagination alignment, filter styling updates).
• Updates an e2e test to navigate directly to the details route and stub the details API call.

Reviewed changes

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

Show a summary per file

File	Description
src/applications/mhv-medications/tests/e2e/medications-non-VA-status-definition-dropdown-details-page.cypress.spec.js	Updates e2e flow for the management-improvements-enabled scenario to visit details page directly and intercept the details request.
src/applications/mhv-medications/sass/medications.scss	Adds/adjusts styling for filter panel, sort dropdown container/width, and pagination alignment.
src/applications/mhv-medications/containers/RefillPrescriptionsV2.jsx	Updates refill step-guide link, removes prescription number from checkbox descriptions, and fixes heading hierarchy in empty state.
src/applications/mhv-medications/components/MedicationsList/MedicationsListSort.jsx	Wraps sort select in a new container to support intended inline layout adjustments.
src/applications/mhv-medications/components/MedicationsList/MedicationsList.jsx	Changes pagination alignment class on the medications list page.