replace aspect-ratio with padding-bottom hack for Chrome 86 compatibility

Author: CattoGamer

public/search/scripts/request.js

@@ -54,9 +54,11 @@ async function initializeServices() {
 		}
 
 		card.innerHTML = `
-			<div class="service-icon logo-${service.icon}"></div>
-			<div class="service-name">${service.name}</div>
-			${isDisabled ? '<div class="disabled-overlay">Codec Required</div>' : ''}
+			<div class="service-card-inner">
+				<div class="service-icon logo-${service.icon}"></div>
+				<div class="service-name">${service.name}</div>
+				${isDisabled ? '<div class="disabled-overlay">Codec Required</div>' : ''}
+			</div>
 		`;
 
 		grid.appendChild(card);

public/search/styles/request.css

@@ -59,19 +59,27 @@ body {
 
 .service-card {
 	position: relative;
-	aspect-ratio: 1;
+	padding-bottom: 100%; /* Simulates aspect-ratio: 1 for Chrome < 88 */
 	background: var(--bg-card);
 	border: 1px solid var(--border-color);
 	border-radius: var(--border-radius);
 	cursor: pointer;
 	transition: var(--transition);
+	overflow: hidden;
+}
+
+.service-card-inner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	text-decoration: none;
 	color: var(--text-primary);
-	overflow: hidden;
 }
 
 .service-card::before {