Bugfix: when scrollbar shows/hides, the entire page shifts🥲

uoa-compsci399-s1-2024 / capstone-project-2024-s1-team-15

Team Bit by Bit - Team 15

https://www.aapc-nz.org

4 stars 0 forks source link

Bugfix: when scrollbar shows/hides, the entire page shifts🥲 #347

Closed arnard76 closed 3 months ago

arnard76 commented 3 months ago

Task

when the scrollbar appears e.g. on the research and news page, it shifts the content a few users have noticed this

Solution

have the scrollbar always on the right (simply disabled when there is overflow)
so that there is no shift when the scrollbar disappears 👇

https://github.com/uoa-compsci399-s1-2024/capstone-project-2024-s1-team-15/assets/78939786/cb555c5b-b98a-44c2-92e3-fd3b265af74c
adds scrollbar when explanation dialogs are open on the health page

HuzzNZ commented 3 months ago

What is the problem here? I'm not really understanding the problem that this solves

arnard76 commented 3 months ago

when the scrollbar appears/disappears, the entire pages shifts slightly

e.g. when moving from contact page (no scrollbar) to pollen page (scrollbar) or when news page hasn't loaded (no scrollbar) then loads (scrollbar)

https://github.com/uoa-compsci399-s1-2024/capstone-project-2024-s1-team-15/assets/78939786/fad787e0-2316-48d6-b3df-9121aa7606d6

HuzzNZ commented 3 months ago

instead of displaying it at all times, how about this:

<html lang="en">
    <body className={`${inter.variable} font-sans max-w-screen min-h-screen flex flex-col overflow-x-hidden`}>
    <div className={"-mr-[calc(100vw-100%)]"}>
        <AuthLayout>
            ...

We wrap page content in a div that has negative right margin equal to the width of the scroll bar. 100vw is the viewport width including the scroll bar but 100% does not include the scroll bar, so 100vw-100% would give us exactly the width of the scroll bar on each browser which allows us to set a negative margin. Looks better imo

arnard76 commented 3 months ago

instead of displaying it at all times, how about this:
<html lang="en">
    <body className={`${inter.variable} font-sans max-w-screen min-h-screen flex flex-col overflow-x-hidden`}>
    <div className={"-mr-[calc(100vw-100%)]"}>
        <AuthLayout>
            ...
We wrap page content in a div that has negative right margin equal to the width of the scroll bar. 100vw is the viewport width including the scroll bar but 100% does not include the scroll bar, so 100vw-100% would give us exactly the width of the scroll bar on each browser which allows us to set a negative margin. Looks better imo

this works for page content, but the flower nav stills shift slightly when scrollbar appears.

arnard76 commented 3 months ago

small change so happy to merge either way

HuzzNZ commented 3 months ago

instead of displaying it at all times, how about this:
<html lang="en">
    <body className={`${inter.variable} font-sans max-w-screen min-h-screen flex flex-col overflow-x-hidden`}>
    <div className={"-mr-[calc(100vw-100%)]"}>
        <AuthLayout>
            ...
We wrap page content in a div that has negative right margin equal to the width of the scroll bar. 100vw is the viewport width including the scroll bar but 100% does not include the scroll bar, so 100vw-100% would give us exactly the width of the scroll bar on each browser which allows us to set a negative margin. Looks better imo
this works for page content, but the flower nav stills shift slightly when scrollbar appears.

negligible imo

padding between flower nav & content should be enough to handle the most severe case which would be right before the lg breakpoint, and nav moving isnt that big of an issue compared to content moving