fix hidden error toast (#4712)

* fix hidden error toast

* fix

* try this

* try this

* fix ts

* cleanup

.config/JSX.d.ts

@@ -1,8 +0,0 @@
-declare namespace svelte.JSX {
-	interface DOMAttributes<T extends EventTarget> {
-		theme?: string;
-		"item-type"?: string;
-		webkitdirectory?: boolean | string;
-		mozdirectory?: boolean | string;
-	}
-}

.config/globals.d.ts

@@ -1,12 +0,0 @@
-declare global {
-	interface Window {
-		__gradio_mode__: "app" | "website";
-		launchGradio: Function;
-		launchGradioFromSpaces: Function;
-		gradio_config: Config;
-		scoped_css_attach: (link: HTMLLinkElement) => void;
-		__is_colab__: boolean;
-	}
-}
-
-export {};

CHANGELOG.md

@@ -24,6 +24,7 @@
 - The `plot` parameter deprecation warnings should now only be emitted for `Image` components by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4709](https://github.com/gradio-app/gradio/pull/4709)
 - Removed uncessessary `type` deprecation warning by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4709](https://github.com/gradio-app/gradio/pull/4709)
 - Ensure Audio autoplays works when `autoplay=True` and the video source is dynamically updated [@pngwn](https://github.com/pngwn) in [PR 4705](https://github.com/gradio-app/gradio/pull/4705)
+- When an error modal is shown in spaces, ensure we scroll to the top so it can be seen by [@pngwn](https://github.com/pngwn) in [PR 4712](https://github.com/gradio-app/gradio/pull/4712)
 - Update depedencies by [@pngwn](https://github.com/pngwn) in [PR 4675](https://github.com/gradio-app/gradio/pull/4675)
 - 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).
 

globals.d.ts

@@ -6,6 +6,9 @@ declare global {
 		gradio_config: Config;
 		scoped_css_attach: (link: HTMLLinkElement) => void;
 		__is_colab__: boolean;
+		parentIFrame?: {
+			scrollTo: (x: number, y: number) => void;
+		};
 	}
 }
 

js/app/src/components/StatusTracker/Toast.svelte

@@ -1,17 +1,27 @@
 <script lang="ts">
+	import { onMount } from "svelte";
 	import { flip } from "svelte/animate";
 	import Error from "./Error.svelte";
 	import type { ToastMessage } from "./types";
 
 	export let messages: ToastMessage[] = [];
+
+	$: scroll_to_top(messages);
+
+	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);
+			}
+		}
+	}
 </script>
 
 <div class="toast-wrap">
 	{#each messages as { type, message, id } (id)}
 		<div animate:flip={{ duration: 300 }} style:width="100%">
-			<!-- {#if type === "error"} -->
 			<Error {message} on:close {id} />
-			<!-- {/if} -->
 		</div>
 	{/each}
 </div>