From 8d909624f61a49536e3c0f71cb2d9efe91216219 Mon Sep 17 00:00:00 2001
From: Ali Abdalla <ali.si3luwa@gmail.com>
Date: Mon, 16 Oct 2023 12:51:05 -0700
Subject: [PATCH] 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>
---
 .changeset/sad-webs-end.md        | 8 ++++++++
 js/audio/interactive/Audio.svelte | 6 ------
 js/audio/shared/Audio.svelte      | 9 +++++++++
 js/image/example/Image.svelte     | 5 -----
 js/image/shared/Image.svelte      | 2 ++
 js/video/shared/Player.svelte     | 8 --------
 js/video/shared/Video.svelte      | 7 +++++--
 7 files changed, 24 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/sad-webs-end.md

diff --git a/.changeset/sad-webs-end.md b/.changeset/sad-webs-end.md
new file mode 100644
index 0000000000..f067271fe3
--- /dev/null
+++ 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
index 7b262963ee..1536b5431b 100644
--- 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
index 01bfa4f6a3..bd48d5be2e 100644
--- 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>
\ No newline at end of file
diff --git a/js/image/example/Image.svelte b/js/image/example/Image.svelte
index 25f0403fcc..88fb86ae06 100644
--- 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
index cde6838af9..cbe840cf2f 100644
--- 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
index e17126c1f5..5c1517eb3d 100644
--- 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
index 7602544647..b6e294c0cf 100644
--- 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>