Desktop: Fixes #9822: Allow dialogs to scroll on small screens

[personalizedrefrigerator]

Summary

Fixes #9822 by allowing dialogs to scroll when there is overflow.

Screen recording:

scroll-demo.webm

Notes

I don't know why overflow: hidden was originally added, but presumably it's because scrollbars add extra space on small screens. As such, to prevent visual regressions, this pull request hides the new overflow scrollbars.

[laurent22]

don't know why overflow: hidden was originally added, but presumably it's because scrollbars add extra space on small screens. As such, to prevent visual regressions, this pull request hides the new overflow scrollbars.

I think it's because some element somewhere was making the layer scroll, even when there was enough space for the dialog. Maybe it doesn't happen anymore but could you check a few dialogs to confirm?

[personalizedrefrigerator]

I think it's because some element somewhere was making the layer scroll, even when there was enough space for the dialog. Maybe it doesn't happen anymore but could you check a few dialogs to confirm?

I tested with the "edit folder", "master password", and "sync wizard" dialogs. Note that the tags and due-date dialogs don't use Dialog.tsx to show a modal. As such, overflow: hidden may have been an attempt to fix #9817.

It seems that even if we use overflow: auto, the scrollbars are still invisible. However, when there is overflow, additional space is allocated for them at the edge of the screen:

This seems to be because we use rgba(100,100,100,.3) for the scrollbar thumb color and rgba(0,0,0,0.6) for the dialog background color. As such, while checking for unnecessary scrollbars above, I temporarily changed the scrollbar thumb color to red.

[laurent22]

That makes sense then, thanks for checking!