3. Okt. 2024, 04:45

_res/_custom.css

@@ -2,12 +2,13 @@ body {
 	position: relative !important;
 }
 body #resolution_modal_wrapper {
-	position: abolute !important;
+	position: absolute !important;
 	inset: 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	backdrop-filter: blur(12px);
+	z-index: 200;
 }
 body #resolution_modal_wrapper #alertModal {
 	position: absolute !important;

_res/_custom.js

@@ -73,7 +73,6 @@ function gradioCustomJS() {
 	const resolutionModalWrapper = document.createElement("div")
 	resolutionModalWrapper.id = "resolution_modal_wrapper"
 	resolutionModalWrapper.style.display = "none"
-	resolutionModalWrapper.style.position = "absolute"
 	resolutionModalWrapper.className = "resolution-modal-wrapper"
 	const alertModalElem = document.createElement("div")
 	const alertModalElemP = document.createElement("p")
@@ -157,14 +156,14 @@ function gradioCustomJS() {
 			gradioContainer.classList.add("blur-container")
 			body.style.setProperty("--blur-value", "12px")
 			gradioApp.style.height = "calc(100vh - 120px)"
-			resolutionModalWrapper.style.display = "none"
+			resolutionModalWrapper.style.display = ""
 			alertModalElem.style.display = ""
 			alertModalElemSpan.textContent = "Diese Seite ist nicht für mobile Geräte optimiert. Bitte besuche diese Seite von einem Desktop-Computer aus."
 		} else if (window.innerWidth < 1024) {
 			gradioContainer.classList.add("blur-container")
 			body.style.setProperty("--blur-value", "12px")
 			gradioApp.style.height = "calc(100vh - 120px)"
-			resolutionModalWrapper.style.display = "none"
+			resolutionModalWrapper.style.display = ""
 			alertModalElem.style.display = ""
 			alertModalElemSpan.textContent = "Bildschirm Auflösung oder Fensterbreite zu gering. Bitte besuche diese Seite von einem Desktop-Computer aus."
 		} else {