Fix styling issues with Audio, Image and Video components (#5934)

* audio styling fix * video styling fix * image examples styling fix * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Oct 16, 2023 · 8d90962 · 8d90962
1 parent 3618238
commit 8d90962
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 21 deletions.
diff --git a/.changeset/sad-webs-end.md b/.changeset/sad-webs-end.md
@@ -0,0 +1,8 @@
+---
+"@gradio/audio": minor
+"@gradio/image": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:Fix styling issues with Audio, Image and Video components
diff --git a/js/audio/interactive/Audio.svelte b/js/audio/interactive/Audio.svelte
@@ -362,10 +362,4 @@
 			opacity: 0;
 		}
 	}
-
-	.container {
-		padding: var(--size-2);
-		width: var(--size-full);
-		height: var(--size-14);
-	}
 </style>
diff --git a/js/audio/shared/Audio.svelte b/js/audio/shared/Audio.svelte
@@ -31,3 +31,12 @@
 {:catch error}
 	<p style="color: red;">{error.message}</p>
 {/await}
+
+
+<style>
+	audio {
+		padding: var(--size-2);
+		width: var(--size-full);
+		height: var(--size-14);
+	}
+</style>
diff --git a/js/image/example/Image.svelte b/js/image/example/Image.svelte
@@ -17,11 +17,6 @@
 </div>
 
 <style>
-	.container {
-		border-radius: var(--radius-lg);
-		max-width: none;
-	}
-
 	.container.selected {
 		border-color: var(--border-color-accent);
 	}

diff --git a/js/image/shared/Image.svelte b/js/image/shared/Image.svelte
@@ -18,5 +18,7 @@
 	img {
 		max-width: 100%;
 		max-height: 100%;
+		border-radius: var(--radius-lg);
+		max-width: none;
 	}
 </style>
diff --git a/js/video/shared/Player.svelte b/js/video/shared/Player.svelte
@@ -169,14 +169,6 @@
 		background-color: rgba(255, 255, 255, 0.9);
 	}
 
-	video {
-		position: inherit;
-		background-color: black;
-		width: var(--size-full);
-		height: var(--size-full);
-		object-fit: contain;
-	}
-
 	.mirror {
 		transform: scaleX(-1);
 	}

diff --git a/js/video/shared/Video.svelte b/js/video/shared/Video.svelte
@@ -61,7 +61,10 @@
 
 <style>
 	video {
-		max-width: 100%;
-		max-height: 100%;
+		position: inherit;
+		background-color: black;
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
 	}
 </style>