search

utdal / profiles

A simple CRUD/search profile system for research profiles, providing user-editable information and basic pages to aesthetically promote and highlight researcher activities and achievements.
MIT License
6 stars 0 forks source link

Layout overflow causing horizontal scroll on all pages #105

Closed betsyecastro closed 3 months ago

betsyecastro commented 1 year ago

I was able to reproduce the issue only in production on my 13in Macbook Air, because when I extend my local environment to that screen, none of the resolution options available when extending the screen allow me to see the page exactly as the Macbook Air does it.

However, I spent a while inspecting the css styles that are present in all the pages, and one thing I noticed is that the footer has full_with class:

.full_width {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 5px 10px 30px;
}

Reducing the width to 99vw causes the scrollbar to disappear but of course it cuts off the footer, I'm not sure if this is the best approach to correct this.

betsyecastro commented 1 year ago

Changing the position from relative to sticky seems to solve the issue. Sticky adjusts dynamically the element between relative and fixed. I read that the element stays relative until it reaches an offset position in the viewport and gets fixed or "sticked". I can commit the change to test it on staging, would you like me to move forward @wunc ?

wunc commented 1 year ago

@betsyecastro I was finally able to reproduce this by changing the macOS setting to "show scroll bars: always". I think the issue is more that width: 100vw. I guess the width of the scrollbar isn't taken into account when using 'vw' units. I'll comment more on your PR.

gab3 commented 1 year ago

Maybe it's Ventura-related? I am seeing it without that setting enabled:

image
wunc commented 1 year ago

@gab3 can you share the exact dimensions & browser when you see it? I wasn't able to reproduce this in Chrome, Firefox, or Safari at any page width that I tried on my computer (without the setting mentioned above).

betsyecastro commented 1 year ago

Either changing the position property from relative to sticky, or removing the class for the elements makes the scrollbar go away, I tested it on my 13in MacBook Air with Ventura (2560 × 1600).

gab3 commented 1 year ago

We discovered it appears to be related to having a mouse USB dongle attached to my monitor. I recall at some point not having scrollbars unless scrolling, so am not sure if this is a new default to Ventura or my settings changed another way (like my doing it and not remembering).

Manually setting it to "When scrolling" causes the vertical and horizontal bars to both go away.