Fix gr.Image height inconsistencies (#8852)

* * prevent source selection cut off * add height:100% to image-container * ensure elements are centered * add changeset * add changeset * change cover to contain --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Jul 22, 2024 · 16b8200 · 16b8200
1 parent a238af4
commit 16b8200
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 10 deletions.
diff --git a/.changeset/yellow-cooks-talk.md b/.changeset/yellow-cooks-talk.md
@@ -0,0 +1,9 @@
+---
+"@gradio/atoms": patch
+"@gradio/image": patch
+"@gradio/imageeditor": patch
+"@gradio/simpleimage": patch
+"gradio": patch
+---
+
+fix:Fix gr.Image height inconsistencies
diff --git a/js/atoms/src/SelectSource.svelte b/js/atoms/src/SelectSource.svelte
@@ -68,12 +68,10 @@
 		align-items: center;
 		justify-content: center;
 		border-top: 1px solid var(--border-color-primary);
-		width: 95%;
-		bottom: 0;
-		left: 0;
-		right: 0;
+		width: 100%;
 		margin-left: auto;
 		margin-right: auto;
+		height: var(--size-10);
 	}
 
 	.icon {

diff --git a/js/image/shared/ImagePreview.svelte b/js/image/shared/ImagePreview.svelte
@@ -69,6 +69,9 @@
 {/if}
 
 <style>
+	.image-container {
+		height: 100%;
+	}
 	.image-container :global(img),
 	button {
 		width: var(--size-full);

diff --git a/js/image/shared/ImageUploader.svelte b/js/image/shared/ImageUploader.svelte
@@ -109,7 +109,7 @@
 			}}
 		/>
 	{/if}
-	<div class="upload-container">
+	<div class="upload-container" class:reduced-height={sources.length > 1}>
 		<Upload
 			hidden={value !== null || active_source === "webcam"}
 			bind:this={upload_input}
@@ -165,7 +165,7 @@
 	.image-frame :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);
-		object-fit: cover;
+		object-fit: contain;
 	}
 
 	.image-frame {
@@ -181,6 +181,10 @@
 		width: 100%;
 	}
 
+	.reduced-height {
+		height: calc(100% - var(--size-10));
+	}
+
 	.image-container {
 		display: flex;
 		height: 100%;

diff --git a/js/image/shared/Webcam.svelte b/js/image/shared/Webcam.svelte
@@ -233,7 +233,11 @@
 		class:hide={!webcam_accessed}
 	/>
 	{#if !webcam_accessed}
-		<div in:fade={{ delay: 100, duration: 200 }} title="grant webcam access">
+		<div
+			in:fade={{ delay: 100, duration: 200 }}
+			title="grant webcam access"
+			style="height: 100%"
+		>
 			<WebcamPermissions on:click={async () => access_webcam()} />
 		</div>
 	{:else}

diff --git a/js/imageeditor/shared/tools/Sources.svelte b/js/imageeditor/shared/tools/Sources.svelte
@@ -268,7 +268,6 @@
 		width: 100%;
 		left: 0;
 		top: 0;
-		/* background-color: pink; */
 	}
 
 	.upload-container.click-disabled {

diff --git a/js/simpleimage/shared/ImagePreview.svelte b/js/simpleimage/shared/ImagePreview.svelte
@@ -38,6 +38,9 @@
 {/if}
 
 <style>
+	.image-container {
+		height: 100%;
+	}
 	.image-container :global(img),
 	button {
 		width: var(--size-full);

diff --git a/js/simpleimage/shared/ImageUploader.svelte b/js/simpleimage/shared/ImageUploader.svelte
@@ -74,11 +74,10 @@
 	.image-frame :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);
-		object-fit: cover;
+		object-fit: contain;
 	}
 
 	.image-frame {
-		object-fit: cover;
 		width: 100%;
 		height: 100%;
 	}