WhoCanIVoteFor icon indicating copy to clipboard operation
WhoCanIVoteFor copied to clipboard

Published 20 hours ago • verified publisher icon DemocracyClub

Wrong aspect ratio on photos & extreme word wrap

Open edent opened this issue 1 year ago • 2 comments

Issue and Steps to Reproduce

Using a narrow screen device like a phone, visit https://whocanivotefor.co.uk/elections/w1a%201aa/

Scroll to "London Assembly elections"

Open the "Show 7 candidates" details box.

Screenshots

Screenshot_20240329-071830

Expected

Element should not be squashed to the side. Photos should retain aspect ratio.

Actual

Looks a bit weird on some mobile platforms. Word wrap is excessive.

Additional Details

  • Browser and version: Firefox 124.1.0 Android.
  • Were you logged in? No

edent avatar Mar 29 '24 07:03 edent

I think this might be caused by the breakpoints - see these three examples.

Screen width of 328 works Screenshot from 2024-03-29 08-07-28

329 and above breaks Screenshot from 2024-03-29 08-08-10

Over 400 works Screenshot from 2024-03-29 08-15-15

edent avatar Mar 29 '24 08:03 edent

Thanks! We have an open PR to improve this https://github.com/DemocracyClub/WhoCanIVoteFor/pull/1790 but it will need further work in https://github.com/DemocracyClub/design-system

VirginiaDooley avatar Apr 04 '24 19:04 VirginiaDooley