Fix Gallery preview overlay and backdrop (#7505)

* Restore `Gallery` translucent background

* Add `backdrop-filter` for Safari

* Fix overflowing `Gallery` preview overlay

* add changeset

* Older browser support

* add changeset

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Dawood Khan <dawoodkhan82@gmail.com>

Author: 4 people

.changeset/young-emus-find.md

@@ -0,0 +1,7 @@
+---
+"@gradio/app": patch
+"@gradio/gallery": patch
+"gradio": patch
+---
+
+fix:Fix `Gallery` preview overlay and backdrop

js/app/src/Blocks.svelte

@@ -867,6 +867,7 @@
 
 	.backdrop {
 		flex: 1 1 0%;
+		-webkit-backdrop-filter: blur(4px);
 		backdrop-filter: blur(4px);
 	}
 

js/gallery/shared/Gallery.svelte

@@ -338,14 +338,22 @@
 	.preview {
 		display: flex;
 		position: absolute;
-		top: 0px;
-		right: 0px;
-		bottom: 0px;
-		left: 0px;
 		flex-direction: column;
 		z-index: var(--layer-2);
+		border-radius: calc(var(--block-radius) - var(--block-border-width));
+		-webkit-backdrop-filter: blur(8px);
 		backdrop-filter: blur(8px);
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.preview::before {
+		content: "";
+		position: absolute;
+		z-index: var(--layer-below);
 		background: var(--background-fill-primary);
+		opacity: 0.9;
+		width: var(--size-full);
 		height: var(--size-full);
 	}