[NO-TICKET] Use min-width in Table and Pagination for responsive breakpoint consistency

[bilherron]

Summary

The HCgov Accounts team recently worked on a feature that implemented stackable Table components. During visual QA, we noticed that the table layout would change at one pixel wider than the rest of the other responsive components on the page. During debugging, I noticed that _Table.scss was specifying breakpoints with @media (max-width: $media-width-X) { ... } while the rest of the DS components used min-width: $media-width-X (<Pagination> also uses max-width in one spot).

This PR updates the media query breakpoint rules in the <Table> and <Pagination> components to use min-width rather than max-width to set the breakpoints.

How to test

1. Create a test page similar to

<Table
  stackable
  stackableBreakpoint={'md'}
>
  <TableHead>
    <TableRow>
      <TableCell id={'Col1'}> {'Col1'}</TableCell>
      <TableCell id={'Col2'}>{'Col2'} </TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell
        headers={'Col1'}
        stackedTitle={'Col1'}
      >
        {'Data 1'}
      </TableCell>
      <TableCell
        headers={'Col2'}
        stackedTitle={'Col2'}
      >
        {'Data 2'}
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

2. View page at viewport width 769px, 768px, and 767px and confirm that the <Alert> and <Table> components re-flow together at the same widths.

Checklist

• Prefixed the PR title with the Jira ticket number as [WNMGDS-####] Title or [NO-TICKET] if this is unticketed work.
• Selected appropriate Type (only one) label for this PR, if it is a breaking change, label should only be Type: Breaking
• Selected appropriate Impacts, multiple can be selected.
• Selected appropriate release milestone

If this is a change to design:

• If visual regression image references have been changed, design MUST be assigned to review. In this instance, designer approval is a requirement before the PR can be merged.

If this is a change to code:

• Created or updated unit tests to cover any new or modified code
• Verified that running both npm run test:unit and npm run test:browser:all were each successful
• If necessary, updated unit-test snapshots (npm run test:unit:update) and browser-test snapshots (npm run test:browser:all:update)

If this is a change to documentation:

• Checked for spelling and grammatical errors

[jack-ryan-nava-pbc]

@bilherron is the bug fix that your team needs here: @media (min-width: $media-width-sm + 1). This change we can accommodate at this time.

The other changes are substantial and break most of our styling for Table and Pagination components as it basically reverses when the CSS rules are applied.

[bilherron]

🤦 Yeah, you're totally right. I think there was something I was intending to accomplish here but I'll have to revisit it in detail. I'll take a look this week.

[jack-ryan-nava-pbc]

@bilherron do you think we can close this ticket for the time being?

[jack-ryan-nava-pbc]

Closing since I haven't heard anything from @bilherron in a while.