Merge pull request #1421 from zauberzeug/dialog-scroll

Prevent the page from scrolling when closing a dialog

main.py

@@ -34,6 +34,11 @@ app.add_static_files('/favicon', str(Path(__file__).parent / 'website' / 'favico
 app.add_static_files('/fonts', str(Path(__file__).parent / 'website' / 'fonts'))
 app.add_static_files('/static', str(Path(__file__).parent / 'website' / 'static'))
 
+# HACK: prevent the page from scrolling when closing a dialog (#1404)
+def on_dialog_value_change(sender, value, on_value_change=ui.dialog.on_value_change) -> None:
+    ui.query('html').classes(**{'add' if value else 'remove': 'has-dialog'})
+    on_value_change(sender, value)
+ui.dialog.on_value_change = on_dialog_value_change
 
 @app.get('/logo.png')
 def logo() -> FileResponse:

website/static/style.css

@@ -9,6 +9,9 @@ body {
 html:has(.body--dark) {
   background-color: #222;
 }
+html:not(.has-dialog) {
+  scroll-behavior: smooth;
+}
 .browser-window {
   font-family: Roboto, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
@@ -127,13 +130,6 @@ dl.docinfo p {
   background-color: #3e6a94;
 }
 
-@media only screen and (min-width: 1024px) {
-  html {
-    /* prevent issues with smooth scrolling while menu is closing */
-    scroll-behavior: smooth;
-  }
-}
-
 /* google-webfonts-helper (https://gwfh.mranftl.com/fonts) */
 /* fira-sans-regular - latin */
 @font-face {