UX Design - Improve horizontal and vertical table responsiveness

[JohnamLane]

This issue mainly impacts the staff view of the transaction list, but thought can go into if the single account view can be adjusted as well.

When staff select lots or all of the available columns, the central view does not expand to show these columns. This results in an odd experience of scrolling horizontally back and forth to see all of the columns. Please plan how this inconvenience can be avoided. I have said without horizontal scroll bars, but I am open to any solution brought forth by the UX team.

Example showing horizontal scroll bar since many columns have been selected:

and vertical table space is very narrow on bigger screens: Private Zenhub Image

Scope: Account Settings Staff Dashboard My business registry list (vertical)

UXPin: https://preview.uxpin.com/1d7dedd9ac1aa0ab98746a8ce90390539fe9d020#/pages/161308628/specification/no-panels

[ethantspitt]

Previous UX discussion related to this ticket: UI Design - define resolutions we'll support #9908

[ethantspitt]

Current implementation [As of Nov 19, 2021] BC Registries and Online Services UI expands to 1360px, beyond which the gutter on either side grows in size. PPR UI expands to 1360px, beyond which the gutter on either side grows in size. Name Request UI expands up to 1185px, beyond which the gutter on either side grows in size. CMSLite (www2.gov.bc.ca) 1170px

Suggestion for implementation: UI expands to 1840px, beyond which the gutter on either side grows in size.

• Staff dashboard
• My account detail page
• PPR UI ？

Size Labels According to Material Design (Source Vuetify) Code	Device / Type	Size Range
xs	Small to large phone	< 600px
sm	Small to medium tablet	600px ~ 960px
md	Large tablet to laptop	960px ~ 1264px*
lg	Desktop	1264px ~ 1904px*
xl	4k and ultra-wide	> 1904px*

Existing breakpoint observation:

• 1904px on the home page
• 1920px on the decide-business page

[JohnamLane]

@ethantspitt Please reach out to Alexis Ronse to see if this can be added to the new design system. Failing that, we should save these changes for after Vue3 upgrade is complete for AUTH WEB.