search

cds-snc / notification-planning

Project planning for GC Notify Team
5 stars 0 forks source link

Horizontal scrolling #590

Closed adriannelee closed 10 months ago

adriannelee commented 2 years ago

Issue group: Tables Visibility: 2 Evaluation: Partially Supports Success Criteria: 1.4.10: Reflow Needs design:

Description

On mobile layouts the “Your profile” page may require horizontal scrolling depending on the length of the Email address. This can be remedied by allowing the text of the email address to break/wrap at any point.

andrewleith commented 12 months ago

@adriannelee, I am unable to re-produce this. Even with a long email address, it appears to wrap fine. Is it possible this has been fixed? I checked with my phone too (android) and things wrapped there as well.

image

adriannelee commented 12 months ago

@andrewleith My guess is that the auditor couldn't test this himself last year and mentioned it in case it might be an issue. I think we can move this to Done. What do you think @amazingphilippe ?

amazingphilippe commented 12 months ago

@andrewleith I think you migth be zoomed out. The overflow might not create a scrollbar. If you look at the header and footer, they seem to be narrower than your current viewport, because they are being pushed out by the width of the table.

We may want to let the text break anywhere, not just at the dashes, spaces or other breaking characters. The readability will be more difficult though. If we want, we could probably work on a different layout on this page and avoid having to use a table altogether!

andrewleith commented 12 months ago

Hmm you are right, I was zoomed out! Also, when I test this again it is not breaking/wrapping like in my screenshot. Not sure what was going on there!

So, if we update the css a bit we can get this to do some word breaking, but it isn't perfect. Here is using overflow-wrap: anywhere on .do-not-truncate-text:

image

@amazingphilippe is this a good solution? Or should we try something else?

amazingphilippe commented 12 months ago

Its something! It fixes the horizontal scrolling, but breaks readability. So its not a good trade-off. Maybe we should spend some time to design table-less solution. I don't think this is the best use case for a table anyways. A flexbox layout would work really nicely.

What do you think?

andrewleith commented 11 months ago

Yeah makes sense. I spent a little time on this Friday, I'll post a PR in a few!

andrewleith commented 11 months ago

Pushed a PR yesterday to address this layout: https://github.com/cds-snc/notification-admin/issues/1684

andrewleith commented 11 months ago

@amazingphilippe could you take a look when you have a chance?

whabanks commented 11 months ago

QA'd in production, looks good!