UI fix (#4447)

* revert correct empty sizes for components

* tweak

* changelog

* fix empty icon alignment with custom height

* fixes

* revert demo

* more tweaks

* remove logs

* format

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 ## Bug Fixes:
 
+- Ensure components have the correct empty sizes to prevent empty containers from collapsing by [@pngwn](https://github.com/pngwn) in [PR 4447](https://github.com/gradio-app/gradio/pull/4447).
 - Frontend code no longer crashes when there is a relative URL in an `<a>` element, by [@akx](https://github.com/akx) in [PR 4449](https://github.com/gradio-app/gradio/pull/4449).
 
 ## Other Changes:

js/app/src/components/AnnotatedImage/AnnotatedImage.svelte

@@ -74,7 +74,7 @@
 
 	<div class="container">
 		{#if _value == null}
-			<Empty unpadded_box={true}><Image /></Empty>
+			<Empty size="large" unpadded_box={true}><Image /></Empty>
 		{:else}
 			<div class="image-container">
 				<!-- svelte-ignore a11y-missing-attribute -->

js/app/src/components/Label/Label.svelte

@@ -36,6 +36,7 @@
 	{container}
 	{scale}
 	{min_width}
+	padding={false}
 >
 	<StatusTracker {...loading_status} />
 	{#if show_label}
@@ -44,6 +45,6 @@
 	{#if _label !== undefined && _label !== null}
 		<Label on:select {selectable} {value} {show_label} {color} />
 	{:else}
-		<Empty><LabelIcon /></Empty>
+		<Empty unpadded_box={true}><LabelIcon /></Empty>
 	{/if}
 </Block>

js/app/src/components/Model3D/Model3D.svelte

@@ -65,6 +65,6 @@
 
 		<BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
 
-		<Empty unpadded_box={true}><File /></Empty>
+		<Empty unpadded_box={true} size="large"><File /></Empty>
 	{/if}
 </Block>

js/app/src/components/TimeSeries/TimeSeries.svelte

@@ -155,7 +155,7 @@
 		{#if static_data}
 			<Chart value={static_data} {colors} />
 		{:else}
-			<Empty unpadded_box={true}>
+			<Empty unpadded_box={true} size="large">
 				<ChartIcon />
 			</Empty>
 		{/if}

js/atoms/src/Empty.svelte

@@ -1,8 +1,29 @@
 <script lang="ts">
+	export let size: "small" | "large" = "small";
 	export let unpadded_box = false;
+
+	let el: HTMLDivElement;
+	$: parent_height = compare_el_to_parent(el);
+
+	function compare_el_to_parent(el: HTMLDivElement) {
+		if (!el) return;
+
+		const { height: el_height } = el.getBoundingClientRect();
+		const { height: parent_height } =
+			el.parentElement?.getBoundingClientRect() || { height: el_height };
+
+		return el_height > parent_height + 2;
+	}
 </script>
 
-<div class="empty" class:unpadded_box>
+<div
+	class="empty"
+	class:small={size === "small"}
+	class:large={size === "large"}
+	class:unpadded_box
+	bind:this={el}
+	class:small_parent={parent_height}
+>
 	<div class="icon">
 		<slot />
 	</div>
@@ -13,6 +34,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		margin-top: calc(0px - var(--size-6));
 		height: var(--size-full);
 	}
 
@@ -22,11 +44,27 @@
 		color: var(--body-text-color);
 	}
 
-	.unpadded_box.small {
+	.small {
+		min-height: calc(var(--size-32) - 20px);
+	}
+
+	.large {
+		min-height: calc(var(--size-64) - 20px);
+	}
+
+	.unpadded_box {
+		margin-top: 0;
+	}
+
+	/* .unpadded_box.small {
 		min-height: var(--size-32);
 	}
 
 	.unpadded_box.large {
 		min-height: var(--size-64);
+	} */
+
+	.small_parent {
+		min-height: 100% !important;
 	}
 </style>

js/audio/src/StaticAudio.svelte

@@ -40,7 +40,7 @@
 
 <BlockLabel {show_label} Icon={Music} float={false} label={label || "Audio"} />
 {#if value === null}
-	<Empty unpadded_box={true}>
+	<Empty size="small">
 		<Music />
 	</Empty>
 {:else}

js/code/Index.svelte

@@ -50,7 +50,7 @@
 		<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
 
 		{#if !value}
-			<Empty unpadded_box={true}>
+			<Empty unpadded_box={true} size="large">
 				<CodeIcon />
 			</Empty>
 		{:else}

js/file/src/File.svelte

@@ -20,5 +20,5 @@
 {#if value}
 	<FilePreview {selectable} on:select {value} />
 {:else}
-	<Empty unpadded_box={true}><File /></Empty>
+	<Empty unpadded_box={true} size="large"><File /></Empty>
 {/if}

js/gallery/src/Gallery.svelte

@@ -173,7 +173,7 @@
 	/>
 {/if}
 {#if value === null || _value === null || _value.length === 0}
-	<Empty unpadded_box={true}><Image /></Empty>
+	<Empty unpadded_box={true} size="large"><Image /></Empty>
 {:else}
 	{#if selected_image !== null}
 		<div

js/image/src/StaticImage.svelte

@@ -29,7 +29,7 @@
 
 <BlockLabel {show_label} Icon={Image} label={label || "Image"} />
 {#if value === null}
-	<Empty unpadded_box={true}><Image /></Empty>
+	<Empty unpadded_box={true} size="large"><Image /></Empty>
 {:else}
 	<div class="download">
 		<a

js/label/src/Label.svelte

@@ -14,7 +14,7 @@
 	export let selectable: boolean = false;
 </script>
 
-<div>
+<div class="container">
 	<div
 		class:sr-only={!show_label}
 		class="output-class"
@@ -50,6 +50,9 @@
 </div>
 
 <style>
+	.container {
+		padding: var(--block-padding);
+	}
 	.output-class {
 		display: flex;
 		justify-content: center;

js/plot/src/Plot.svelte

@@ -207,7 +207,7 @@
 		<img src={plot} />
 	</div>
 {:else}
-	<Empty unpadded_box={true}><PlotIcon /></Empty>
+	<Empty  unpadded_box={true} size="large"><PlotIcon /></Empty>
 {/if}
 
 <style>

js/video/src/StaticVideo.svelte

@@ -42,7 +42,7 @@
 
 <BlockLabel {show_label} Icon={Video} label={label || "Video"} />
 {#if value === null}
-	<Empty unpadded_box={true}><Video /></Empty>
+	<Empty unpadded_box={true} size="large"><Video /></Empty>
 {:else}
 	<!-- svelte-ignore a11y-media-has-caption -->
 	{#key value.data}