From 3e4871c3d9b138495b1491000287c59c281cc665 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Thu, 8 Jun 2023 21:24:13 +0900
Subject: [PATCH] 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                                  |  1 +
 .../AnnotatedImage/AnnotatedImage.svelte      |  2 +-
 js/app/src/components/Label/Label.svelte      |  3 +-
 js/app/src/components/Model3D/Model3D.svelte  |  2 +-
 .../components/TimeSeries/TimeSeries.svelte   |  2 +-
 js/atoms/src/Empty.svelte                     | 42 ++++++++++++++++++-
 js/audio/src/StaticAudio.svelte               |  2 +-
 js/code/Index.svelte                          |  2 +-
 js/file/src/File.svelte                       |  2 +-
 js/gallery/src/Gallery.svelte                 |  2 +-
 js/image/src/StaticImage.svelte               |  2 +-
 js/label/src/Label.svelte                     |  5 ++-
 js/plot/src/Plot.svelte                       |  2 +-
 js/video/src/StaticVideo.svelte               |  2 +-
 14 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e531449bb6..1b5f74cb38 100644
--- a/CHANGELOG.md
+++ b/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:
diff --git a/js/app/src/components/AnnotatedImage/AnnotatedImage.svelte b/js/app/src/components/AnnotatedImage/AnnotatedImage.svelte
index 2accf0e0f7..6f77a2f795 100644
--- a/js/app/src/components/AnnotatedImage/AnnotatedImage.svelte
+++ b/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 -->
diff --git a/js/app/src/components/Label/Label.svelte b/js/app/src/components/Label/Label.svelte
index eb7ad7862b..cd83157773 100644
--- a/js/app/src/components/Label/Label.svelte
+++ b/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>
diff --git a/js/app/src/components/Model3D/Model3D.svelte b/js/app/src/components/Model3D/Model3D.svelte
index 0dfd317ef7..45ccefd25d 100644
--- a/js/app/src/components/Model3D/Model3D.svelte
+++ b/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>
diff --git a/js/app/src/components/TimeSeries/TimeSeries.svelte b/js/app/src/components/TimeSeries/TimeSeries.svelte
index 8414a48961..6a226a6e03 100644
--- a/js/app/src/components/TimeSeries/TimeSeries.svelte
+++ b/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}
diff --git a/js/atoms/src/Empty.svelte b/js/atoms/src/Empty.svelte
index 531e1faba3..c06dfc375e 100644
--- a/js/atoms/src/Empty.svelte
+++ b/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>
diff --git a/js/audio/src/StaticAudio.svelte b/js/audio/src/StaticAudio.svelte
index 2fd5c1870b..daf9e9e12e 100644
--- a/js/audio/src/StaticAudio.svelte
+++ b/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}
diff --git a/js/code/Index.svelte b/js/code/Index.svelte
index 3f975beb64..641739722e 100644
--- a/js/code/Index.svelte
+++ b/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}
diff --git a/js/file/src/File.svelte b/js/file/src/File.svelte
index 5120a5e545..3f62ee5876 100644
--- a/js/file/src/File.svelte
+++ b/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}
diff --git a/js/gallery/src/Gallery.svelte b/js/gallery/src/Gallery.svelte
index 4941d1f974..edf486f039 100644
--- a/js/gallery/src/Gallery.svelte
+++ b/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
diff --git a/js/image/src/StaticImage.svelte b/js/image/src/StaticImage.svelte
index 1dd7f221a3..1c48a32a4e 100644
--- a/js/image/src/StaticImage.svelte
+++ b/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
diff --git a/js/label/src/Label.svelte b/js/label/src/Label.svelte
index 4b68b90612..eb3c8707b4 100644
--- a/js/label/src/Label.svelte
+++ b/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;
diff --git a/js/plot/src/Plot.svelte b/js/plot/src/Plot.svelte
index 83e25ee333..405e524529 100644
--- a/js/plot/src/Plot.svelte
+++ b/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>
diff --git a/js/video/src/StaticVideo.svelte b/js/video/src/StaticVideo.svelte
index 69b3bdff27..2bb2c4c752 100644
--- a/js/video/src/StaticVideo.svelte
+++ b/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}