#3357: Position action kebobs on the left on desktops - [RJM]

[rachidatecs]

Ticket

Resolves #3357

Changes

• Move action kebobs from the right to the left on desktops

Context for reviewers

• This is possible because of an override to the overflow prop of the responsive table wrapper on desktop. If we overwrite in on mobile, we break the responsiveness. I used a custom class for the override to leave out-of-the-box tables alone.
• Note that on the last row on domain requests, I still needed to hack the positioning of that kebob: On smaller than desktop, I want that kebob to ride up instead of down because the bottom of the table can still cause clipping at those screen sizes
• The code for repositioning just works on member table even though it is not responsive
• The whole UI will look better once 3281 gets merged in. There are UI tweaks on margins, buttons, etc.

Setup

Code Review Verification Steps

As the original developer, I have

Satisfied acceptance criteria and met development standards

• Met the acceptance criteria, or will meet them in a subsequent PR
• Created/modified automated tests
• Update documentation in READMEs and/or onboarding guide

Ensured code standards are met (Original Developer)

• If any updated dependencies on Pipfile, also update dependencies in requirements.txt.
• Interactions with external systems are wrapped in try/except
• Error handling exists for unusual or missing values

Validated user-facing changes (if applicable)

• Tag @dotgov-designers in this PR's Reviewers for design review. If code is not user-facing, delete design reviewer checklist
• Verify new pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
• Checked keyboard navigability
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

• Pulled this branch locally and tested it
• Verified code meets all checks above. Address any checks that are not satisfied
• Reviewed this code and left comments. Indicate if comments must be addressed before code is merged
• Checked that all code is adequately covered by tests
• Verify migrations are valid and do not conflict with existing migrations

Validated user-facing changes as a developer

Note: Multiple code reviewers can share the checklists above, a second reviewer should not make a duplicate checklist. All checks should be checked before approving, even those labeled N/A.

• New pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
• Checked keyboard navigability
• Meets all designs and user flows provided by design/product
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
• (Rarely needed) Tested as both an analyst and applicant user

As a designer reviewer, I have

Verified that the changes match the design intention

• Checked that the design translated visually
• Checked behavior. Comment any found issues or broken flows.
• Checked different states (empty, one, some, error)
• Checked for landmarks, page heading structure, and links

Validated user-facing changes as a designer

• Checked keyboard navigability
• Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
• Tested with multiple browsers (check off which ones were used)
  • Chrome
  • Microsoft Edge
  • FireFox
  • Safari
• (Rarely needed) Tested as both an analyst and applicant user

References

• Code review best practices

Screenshots

[rachidatecs]

If you know of a mixin for max-width in USWDS code, let me know. I understand mobile first and I agree with it, but this is a case where it makes sense to break the rule.

[zandercymatics]

Would @include at-media-max("desktop") work?

source: https://designsystem.digital.gov/design-tokens/spacing-units/

[github-actions]

🥳 Successfully deployed to developer sandbox rjm.

[gabo0oo]

I'm not seeing the menu display to the right of the kebab, it is still to the left.

[zandercymatics]

Can confirm that this is working on the member table, but like gaby said it seems like its not working on domain request

[rachidatecs]

PR conflict on RJM sandbox, sorry y'all. Fixing it now @zandercymatics @gabo0oo

[github-actions]

🥳 Successfully deployed to developer sandbox rjm.

[github-actions]

🥳 Successfully deployed to developer sandbox rjm.

[zandercymatics]

Nice work