Dialog on mobile width has double scrollbar sections

[kevinlee11]

Bug description

If you have a dialog open in a mobile width scenario (i.e. where it appears full width at the bottom) it ends up displaying double scrollbar sections.

Reproduction

Open a dialog in a browser that has mobile width.

Environment

System:
    OS: macOS 11.6.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.80 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
  npmPackages:
    @square/maker: ^7.0.0 => 7.0.0 
    vue: ^2.6.14 => 2.6.14 
    webpack: ^5.37.0 => 5.38.1

Addressed by

No response

Can you contribute a fix?

• I’m interested in opening a pull request for this issue.

[kirill]

Hmm, I feel like something might have changed with how Chrome handles overflow: scroll; recently because I'm seeing this bug even back in Maker v4.3.0 when the Dialog component was first released and there's no way we would have released it with such an obvious bug.

[kirill]

oof, the bug has even backported itself all the way to Maker v2.0.1 to the Modal component and back to Maker v2.1.0 to the Blade component

[Landon Durnan]

I'm having trouble replicating the issue myself. Which browsers does this happen in and does it require different OS settings for scrollbar behavior?

[kirill]

@landondurnan i've been using macOS 11.6.4 with Chrome 98 and can reproduce consistently.

[kirill]

pr merged