search

hathitrust / firebird-common

Other
0 stars 0 forks source link

DEV-1175/#91: Reflow issues #98

Closed carylwyatt closed 3 months ago

carylwyatt commented 3 months ago

1727499 / DEV-1175

This issue occurred in Advanced Search. Turns out there were multiple reflow issues. The issue flagged by deque is only that the placeholder text in the search input field was cut off when zoomed in. It needs to be fully visible.

Issue:

image

What we learned as I starting debugging this is that the input fields should've started wrapping but they couldn't because a single element later in the page was set to nowrap which caused other elements to not collapse when they should've. Video link for posterity.

@giramesh designed a mobile view for the main search fields and flexbox made it easy to change those without rearranging the markup.

On dev-3 at 400%:

image

To test: Go to dev-3 advanced search page and zoom your browser in to 400%. Verify that you can read all the fields and that none of the UI elements are hidden behind a horizontal scroll.

1728469 and 1728474

These issues are related to the cookie consent banner. At 400%, the content of the cookie banner takes up the whole screen and you can't read some of the content and/or see/use the close button.

The banner on my browser at 400%:

image

I changed the max-height of the banner from a static-ish rem value to a percentage of the viewport height: 80vh. This caps the height of the cookie banner to 80% of the viewport height. I also added a scroll for the overflow of that content.

The banner on dev-3 at 400%:

image

To test: anywhere on dev-3 (you might need to clear your cookies to see the banner again), zoom your browser in to 400%. Verify that you can see all the content, even if it requires scrolling on the cookie banner to get to the buttons at the bottom of the banner.

closes issue #91

netlify[bot] commented 3 months ago

Deploy Preview for hathitrust-firebird-common ready!

Name Link
Latest commit 321a9cbd277103c8777de2c1bd094cc327ca385f
Latest deploy log https://app.netlify.com/sites/hathitrust-firebird-common/deploys/66b60919fa75ff0008020278
Deploy Preview https://deploy-preview-98--hathitrust-firebird-common.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

giramesh commented 3 months ago

1727499:Advanced search - search input fields are unavailable at 320px

✅ chrome: can verify all the fields are visible and are not hidden behind a horizontal scroll ✅ edge: ditto~^ ✅ firefox: ^^ ✅ safari: ^^

1728469 and 1728474: Cookie banner: functionality lost at 200% and 320px

✅ chrome: works as described and can verify all content is visible at 200% & 320px ✅ edge: ditto^^ ✅ firefox: ^^ ✅ safari: ^^

carylwyatt commented 3 months ago

@giramesh I'm going to add a ticket to an upcoming sprint to make time for adding these browser tests to storybook/chromatic to save us some time here and there. I know not all of our components are in storybook at the moment, but at least we wouldn't have to walk through each browser manually like you're doing now!

ETA: the ticket https://hathitrust.atlassian.net/browse/DEV-1320

carylwyatt commented 3 months ago

@angelinanz and @giramesh this is now staged on test for last-minute checks! thanks!

giramesh commented 3 months ago

checking on test - ALL GOOD!

1727499:Advanced search - search input fields are unavailable at 320px ✅ chrome: can verify all the fields are visible and are not hidden behind a horizontal scroll ✅ edge: ^^ ✅ firefox: ^^ ✅ safari: ^^

1728469 and 1728474: Cookie banner: functionality lost at 200% and 320px ✅ chrome: works as described and can verify all content is visible at 200% & 320px ✅ edge: ^^ ✅ firefox: ^^ ✅ safari: ^^