place toast message at the top of the screen on mobile (#4796)

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:
 

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));
 		}
 	}