Fix formatting on No results found modal

[DavidMcClatchey]

FRONTEND PULL REQUEST

Related Issue

• Resolves [Bug] Fix formatting on No results found modal #8273

Changes Proposed

• This resolves a display error when no results are returned in the "Search by name" field of the Results -> View test results page. It now looks the same as the display on the "Conduct Tests" page search field when no results are returned.

Testing

• Tested locally. I didn't deploy to a dev env since it seems simple enough, but if there's reason to deploy to a dev env please let me know.

Screenshots / Demos

[mehansen]

do we want this modal to look the same as the one on the Conduct tests page when viewed on mobile?

[mpbrown]

LGTM locally!

[mehansen]

I wonder if we should replicate some of what's going on here
https://github.com/CDCgov/prime-simplereport/blob/main/frontend/src/scss/base/_prime-styles.scss#L381-L397 with the way the width adapts to screen size

[DavidMcClatchey]

I wonder if we should replicate some of what's going on here https://github.com/CDCgov/prime-simplereport/blob/main/frontend/src/scss/base/_prime-styles.scss#L381-L397 with the way the width adapts to screen size

@mehansen it looks like the formatting in_prime-styles is already included in the modal style apart from what gets overridden by the "higher specificity" style that's modified in the PR.

[mehansen]

@mehansen it looks like the formatting in_prime-styles is already included in the modal style apart from what gets overridden by the "higher specificity" style that's modified in the PR.

@DavidMcClatchey sorry I meant to point out that we do have this responsive width behavior that's already defined for modals on both pages. so I was wondering why make them different by setting max-width in the first place? it essentially hides the behavior and leads to the modals not looking the same across certain page widths

for the record this is not blocking since the PR solves the issue

[DavidMcClatchey]

@mehansen it looks like the formatting in_prime-styles is already included in the modal style apart from what gets overridden by the "higher specificity" style that's modified in the PR.

@DavidMcClatchey sorry I meant to point out that we do have this responsive width behavior that's already defined for modals on both pages. so I was wondering why make them different by setting max-width in the first place? it essentially hides the behavior and leads to the modals not looking the same across certain page widths

for the record this is not blocking since the PR solves the issue

Good call, it looks like removing the max width setting also had the effect of fixing the formatting issue, so I've pushed that up as a cleaner solution. I also saw the position: absolute; was redundant with what's already in _prime-styles so I've removed that as well.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[mehansen]

thank you!

[mpbrown]

LGTM! Thanks for the cleaner fix!

[bobbywells52]

LGTM -- thanks for the clean fix!