Fix infinite height when fill_height=True and footer_links=[]. Use height: 100% instead of min-height: 100% on .wrap when fill_height is enabled, so the flex container has a definite height constraint even without a footer element. Closes #12992

Author: Aarnonn

demo/fill_height_no_footer/run.py

@@ -0,0 +1,7 @@
+import gradio as gr
+
+with gr.Blocks(fill_height=True) as demo:
+    gr.Chatbot()
+
+if __name__ == "__main__":
+    demo.launch(footer_links=[])

js/core/src/Blocks.svelte

@@ -7,7 +7,7 @@
 	import type {
 		ComponentMeta,
 		Dependency as IDependency,
-		LayoutNode
+		LayoutNode,
 	} from "./types";
 	import type { ThemeMode, Payload } from "./types";
 	import { Toast } from "@gradio/statustracker";
@@ -58,7 +58,7 @@
 		render_complete = false,
 		ready = $bindable(false),
 		reload_count = $bindable(0),
-		add_new_message = $bindable()
+		add_new_message = $bindable(),
 	}: {
 		root: string;
 		components: ComponentMeta[];
@@ -101,7 +101,7 @@
 	function gradio_event_dispatcher(
 		id: number,
 		event: string,
-		data: unknown
+		data: unknown,
 	): void {
 		if (event === "share") {
 			const { title, description } = data as ShareData;
@@ -123,9 +123,9 @@
 			app_tree.update_state(
 				id,
 				{
-					loading_status: {}
+					loading_status: {},
 				},
-				false
+				false,
 			);
 			dep_manager.clear_loading_status(id);
 			// TODO: the loading_status store should handle this via a method
@@ -148,7 +148,7 @@
 				type: "event",
 				event_name: event,
 				target_id: id,
-				event_data: data
+				event_data: data,
 			});
 		}
 	}
@@ -164,23 +164,23 @@
 			api_prefix,
 			max_file_size,
 			autoscroll,
-			fill_height
+			fill_height,
 		},
 		app,
 		$reactive_formatter,
-		gradio_event_dispatcher
+		gradio_event_dispatcher,
 	);
 
 	function dispatch_to_target(
 		target_id: number,
 		event: string,
-		data: unknown
+		data: unknown,
 	): void {
 		dep_manager.dispatch({
 			type: "event",
 			event_name: event,
 			target_id: target_id,
-			event_data: data
+			event_data: data,
 		});
 	}
 
@@ -206,7 +206,7 @@
 			type: "error",
 			id: _error_id,
 			duration: null,
-			visible: true
+			visible: true,
 		});
 
 		reconnect_interval = setInterval(async () => {
@@ -232,7 +232,7 @@
 		app_tree.rerender.bind(app_tree),
 		new_message,
 		add_to_api_calls,
-		handle_connection_lost
+		handle_connection_lost,
 	);
 
 	$effect(() => {
@@ -245,14 +245,14 @@
 				api_prefix,
 				max_file_size,
 				autoscroll,
-				fill_height
+				fill_height,
 			});
 			dep_manager.reload(
 				dependencies,
 				app_tree.update_state.bind(app_tree),
 				app_tree.get_state.bind(app_tree),
 				app_tree.rerender.bind(app_tree),
-				app
+				app,
 			);
 		});
 	});
@@ -261,11 +261,12 @@
 
 	// export let
 	let api_docs_visible = $derived(
-		search_params.get("view") === "api" && footer_links.includes("api")
+		search_params.get("view") === "api" && footer_links.includes("api"),
 	);
 	let settings_visible = $derived(search_params.get("view") === "settings");
 	let api_recorder_visible = $derived(
-		search_params.get("view") === "api-recorder" && footer_links.includes("api")
+		search_params.get("view") === "api-recorder" &&
+			footer_links.includes("api"),
 	);
 	let allow_zoom = true;
 	let allow_video_trim = true;
@@ -344,7 +345,7 @@
 		fn_index: number,
 		type: ToastMessage["type"],
 		duration: number | null = 10,
-		visible = false
+		visible = false,
 	): void {
 		if (!visible) return;
 		messages.push({
@@ -354,7 +355,7 @@
 			type,
 			id: ++_error_id,
 			duration,
-			visible
+			visible,
 		});
 	}
 
@@ -366,7 +367,7 @@
 
 	const DUPLICATE_MESSAGE = $reactive_formatter("blocks.long_requests_queue");
 	const MOBILE_QUEUE_WARNING = $reactive_formatter(
-		"blocks.connection_can_break"
+		"blocks.connection_can_break",
 	);
 	const LOST_CONNECTION_MESSAGE =
 		"Connection to the server was lost. Attempting reconnection...";
@@ -376,7 +377,7 @@
 	const SESSION_NOT_FOUND_MESSAGE =
 		"Session not found - this is likely because the machine you were connected to has changed. <a href=''>Refresh the page</a> to continue.";
 	const WAITING_FOR_INPUTS_MESSAGE = $reactive_formatter(
-		"blocks.waiting_for_inputs"
+		"blocks.waiting_for_inputs",
 	);
 	const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
 	const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
@@ -417,7 +418,7 @@
 	onMount(() => {
 		is_mobile_device =
 			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-				navigator.userAgent
+				navigator.userAgent,
 			);
 
 		if ("parentIFrame" in window) {
@@ -430,7 +431,7 @@
 		mut.observe(root_container, {
 			childList: true,
 			subtree: true,
-			attributes: true
+			attributes: true,
 		});
 		res.observe(root_container);
 
@@ -464,7 +465,11 @@
 	{/if}
 </svelte:head>
 
-<div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
+<div
+	class="wrap"
+	style:min-height={app_mode && !fill_height ? "100%" : "auto"}
+	style:height={app_mode && fill_height ? "100%" : "auto"}
+>
 	<main
 		class="contain"
 		style:flex-grow={app_mode ? "1" : "auto"}

js/spa/test/fill_height_no_footer.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from "@self/tootils";
+
+test("fill_height with empty footer_links does not cause infinite height", async ({
+	page,
+}) => {
+	const wrap = page.locator(".wrap");
+	const viewportHeight = page.viewportSize()!.height;
+
+	const wrapHeight = await wrap.evaluate((el) => el.scrollHeight);
+
+	expect(wrapHeight).toBeLessThanOrEqual(viewportHeight);
+});