Improve responsiveness of gr.Audio() controls (#6991)

* improve audio container in mobile

* check for denied device access

* add changeset

* add changeset

* tweak controls placements

* add changeset

* add viewport modes to test

* add changeset

* add changeset

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: pngwn <hello@pngwn.io>

.changeset/nine-states-sip.md

@@ -0,0 +1,7 @@
+---
+"@gradio/audio": patch
+"@gradio/icons": patch
+"gradio": patch
+---
+
+fix:Improve responsiveness of `gr.Audio()` controls

js/audio/Index.svelte

@@ -130,6 +130,7 @@
 		variant={"solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
+		allow_overflow={false}
 		{elem_id}
 		{elem_classes}
 		{visible}
@@ -165,6 +166,7 @@
 		variant={value === null && active_source === "upload" ? "dashed" : "solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
+		allow_overflow={false}
 		{elem_id}
 		{elem_classes}
 		{visible}

js/audio/interactive/InteractiveAudio.svelte

@@ -286,7 +286,6 @@
 			on:edit
 		/>
 	{/if}
-
 	<SelectSource {sources} bind:active_source handle_clear={clear} />
 </div>
 

js/audio/shared/WaveformControls.svelte

@@ -276,6 +276,7 @@
 		display: flex;
 		justify-self: self-end;
 		align-items: center;
+		grid-area: editing;
 	}
 	.text-button {
 		border: 1px solid var(--neutral-400);
@@ -299,9 +300,26 @@
 	.controls {
 		display: grid;
 		grid-template-columns: 1fr 1fr 1fr;
+		grid-template-areas: "controls playback editing";
 		margin-top: 5px;
 		align-items: center;
 		position: relative;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	.controls div {
+		margin: var(--size-1) 0;
+	}
+
+	@media (max-width: 600px) {
+		.controls {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				"playback playback"
+				"controls editing";
+			overflow: scroll;
+		}
 	}
 
 	.hidden {
@@ -313,25 +331,10 @@
 		justify-self: self-start;
 		align-items: center;
 		justify-content: space-between;
-	}
-
-	@media (max-width: 375px) {
-		.controls {
-			display: flex;
-			flex-wrap: wrap;
-		}
-
-		.controls * {
-			margin: var(--spacing-sm);
-		}
-
-		.controls .text-button {
-			margin-left: 0;
-		}
+		grid-area: controls;
 	}
 
 	.action {
-		width: var(--size-5);
 		width: var(--size-5);
 		color: var(--neutral-400);
 		margin-left: var(--spacing-md);
@@ -343,6 +346,13 @@
 	.play-pause-wrapper {
 		display: flex;
 		justify-self: center;
+		grid-area: playback;
+	}
+
+	@media (max-width: 600px) {
+		.play-pause-wrapper {
+			margin: var(--spacing-md);
+		}
 	}
 	.playback {
 		border: 1px solid var(--neutral-400);
@@ -369,7 +379,6 @@
 	}
 
 	.play-pause-button {
-		width: var(--size-8);
 		width: var(--size-8);
 		display: flex;
 		align-items: center;
@@ -383,5 +392,6 @@
 		display: flex;
 		justify-content: center;
 		margin-right: var(--spacing-xl);
+		width: var(--size-5);
 	}
 </style>

js/icons/src/Trim.svelte

@@ -1,7 +1,7 @@
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	width="20"
-	height="20"
+	width="100%"
+	height="100%"
 	viewBox="0 0 24 24"
 	fill="none"
 	stroke="currentColor"

js/icons/src/VolumeHigh.svelte

@@ -1,6 +1,6 @@
 <svg
-	width="24"
-	height="24"
+	width="100%"
+	height="100%"
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	fill="none"

js/icons/src/VolumeLow.svelte

@@ -1,6 +1,6 @@
 <svg
-	width="24"
-	height="24"
+	width="100%"
+	height="100%"
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	fill="none"

js/icons/src/VolumeMuted.svelte

@@ -1,6 +1,6 @@
 <svg
-	width="24"
-	height="24"
+	width="100%"
+	height="100%"
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	fill="none"