From 726115785bf4e84621cffd20a5216b2e1a9e6b58 Mon Sep 17 00:00:00 2001 From: pngwn Date: Thu, 6 Jul 2023 09:12:46 +0100 Subject: [PATCH] place toast message at the top of the screen on mobile (#4796) --- CHANGELOG.md | 1 + js/app/src/components/StatusTracker/Toast.svelte | 11 ++++------- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 08cd81d84db6..20211fc8b525 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -35,6 +35,7 @@ - Fixes `gr.Dropdown` being cutoff at the bottom by [@abidlabs](https://github.com/abidlabs) in [PR 4691](https://github.com/gradio-app/gradio/pull/4691). - Scroll top when clicking "View API" in spaces by [@pngwn](https://github.com/pngwn) in [PR 4714](https://github.com/gradio-app/gradio/pull/4714) - Fix bug where `show_label` was hiding the entire component for `gr.Label` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4713](https://github.com/gradio-app/gradio/pull/4713) +- Place toast messages at the top of the screen by [@pngwn](https://github.com/pngwn) in [PR 4796](https://github.com/gradio-app/gradio/pull/4796) ## Other Changes: diff --git a/js/app/src/components/StatusTracker/Toast.svelte b/js/app/src/components/StatusTracker/Toast.svelte index c4170b52c6a6..224387d546e7 100644 --- a/js/app/src/components/StatusTracker/Toast.svelte +++ b/js/app/src/components/StatusTracker/Toast.svelte @@ -11,8 +11,7 @@ function scroll_to_top(_messages: ToastMessage[]): void { if (_messages.length > 0) { if ("parentIFrame" in window) { - let is_large = window.matchMedia("(min-width: 640px)").matches; - window.parentIFrame?.scrollTo(0, is_large ? 0 : 999999); + window.parentIFrame?.scrollTo(0, 0); } } } @@ -30,9 +29,10 @@ .toast-wrap { display: flex; position: fixed; + top: var(--size-4); right: var(--size-4); - bottom: var(--size-4); - flex-direction: column-reverse; + + flex-direction: column; align-items: end; gap: var(--size-2); z-index: var(--layer-top); @@ -41,9 +41,6 @@ @media (--screen-sm) { .toast-wrap { - top: var(--size-4); - bottom: unset; - flex-direction: column; width: calc(var(--size-96) + var(--size-10)); } }