elixirschool / school_house

The new era of Elixir School now powered by @phoenixframework
https://elixirschool.com/
Apache License 2.0
155 stars 49 forks source link

fix lesson pagination causing horizontal scroll #165

Closed thth closed 3 years ago

thth commented 3 years ago

Currently, the css for lesson pagination uses width: 100vw (.w-screen) to achieve full screen width as a child of a limited-width (.container) parent.

https://github.com/elixirschool/school_house/blob/b8b5ed30c47d59250ab7f7cbc29c61d418741732/lib/school_house_web/templates/lesson/_pagination.html.heex#L1

The problem with 100vw is that it only works on browsers that overlay scrollbars atop the page (e.g. macOS, mobile browsers). On browsers that fit a scrollbar beside the page (e.g. Windows), the presence of a vertical scrollbar will result in the 100vw element being wider than the page, causing an unseemly horizontal scrollbar.

horizontal_scroll

This is just a "quick fix" that puts overflow-x: hidden on body, which should be fine so long as the website doesn't allow body to ever be wider than the screen (Elixir School's current layout doesn't).

kinson commented 3 years ago

@thth I am unable to test this since I don't own a windows computer right now, do you mind uploading a screen recording with the "after" version of the site?

thth commented 3 years ago

Here's after: horizontal_scroll_after

and for reference, here's what the pagination looks like before when scrolled to the right: (note the right side) image

stackoverflow on the issue

css-tricks article on the full width technique; some of the comments go into the scrollbar issue