Fixes column width for textbox in gr.Examples based on the content (#4700)

* fix

* changelog

* Update CHANGELOG.md

* changes

* changes

* tweaks

* fix

* fix

* fix

* fix types

* fix notebooks

* Update CHANGELOG.md

---------

Co-authored-by: pngwn <hello@pngwn.io>

CHANGELOG.md

@@ -25,6 +25,7 @@
 - Fix double upload bug that caused lag in file uploads by [@aliabid94](https://github.com/aliabid94) in [PR 4661](https://github.com/gradio-app/gradio/pull/4661)
 - `Progress` component now appears even when no `iterable` is specified in `tqdm` constructor by [@itrushkin](https://github.com/itrushkin) in [PR 4475](https://github.com/gradio-app/gradio/pull/4475)
 - Deprecation warnings now point at the user code using those deprecated features, instead of Gradio internals, by (https://github.com/akx) in [PR 4694](https://github.com/gradio-app/gradio/pull/4694)
+- Adapt column widths in gr.Examples based on content  by [@pngwn](https://github.com/pngwn) & [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 4700](https://github.com/gradio-app/gradio/pull/4700)
 - 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)

demo/kitchen_sink/run.py

@@ -158,4 +158,4 @@ demo = gr.Interface(
 )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()

js/app/src/components/Dataset/Dataset.svelte

@@ -5,17 +5,17 @@
 	import { component_map } from "./directory";
 	import type { SelectData } from "@gradio/utils";
 
-	export let components: Array<keyof typeof component_map>;
-	export let label: string = "Examples";
-	export let headers: Array<string>;
-	export let samples: Array<Array<any>>;
-	export let elem_id: string = "";
-	export let elem_classes: Array<string> = [];
-	export let visible: boolean = true;
+	export let components: (keyof typeof component_map)[];
+	export let label = "Examples";
+	export let headers: string[];
+	export let samples: any[][];
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
 	export let value: number | null = null;
 	export let root: string;
 	export let root_url: null | string;
-	export let samples_per_page: number = 10;
+	export let samples_per_page = 10;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 
@@ -31,9 +31,9 @@
 	$: gallery = components.length < 2;
 	let paginate = samples.length > samples_per_page;
 
-	let selected_samples: Array<Array<any>>;
+	let selected_samples: any[][];
 	let page_count: number;
-	let visible_pages: Array<number> = [];
+	let visible_pages: number[] = [];
 
 	let current_hover = -1;
 
@@ -156,8 +156,14 @@
 							on:mouseleave={() => handle_mouseleave()}
 						>
 							{#each sample_row as { value, component }, j}
-								{#if components[j] !== undefined && component_map[components[j]] !== undefined}
-									<td>
+								{@const component_name = components[j]}
+								{#if component_name !== undefined && component_map[component_name] !== undefined}
+									<td
+										style="max-width: {component_name === 'textbox'
+											? '35ch'
+											: 'auto'}"
+										class={component_name}
+									>
 										<svelte:component
 											this={component}
 											{value}

js/app/src/components/Dataset/ExampleComponents/Textbox.svelte

@@ -1,12 +1,31 @@
 <script lang="ts">
+	import { onMount } from "svelte";
 	import type { Value } from "../../Audio/types";
 
 	export let value: Value;
 	export let type: "gallery" | "table";
-	export let selected: boolean = false;
+	export let selected = false;
+
+	let size: number;
+	let el: HTMLDivElement;
+
+	function set_styles(element: HTMLElement, el_width: number): void {
+		if (!element || !el_width) return;
+		el.style.setProperty(
+			"--local-text-width",
+			`${el_width < 150 ? el_width : 200}px`
+		);
+		el.style.whiteSpace = "unset";
+	}
+
+	onMount(() => {
+		set_styles(el, size);
+	});
 </script>
 
 <div
+	bind:clientWidth={size}
+	bind:this={el}
 	class:table={type === "table"}
 	class:gallery={type === "gallery"}
 	class:selected
@@ -18,4 +37,11 @@
 	.gallery {
 		padding: var(--size-1) var(--size-2);
 	}
+
+	div {
+		overflow: hidden;
+		min-width: var(--local-text-width);
+
+		white-space: nowrap;
+	}
 </style>