From 9d1c26e79859412907ab9deed8f4081e3d143550 Mon Sep 17 00:00:00 2001
From: lscambo13 <ls.cambo13@gmail.com>
Date: Fri, 22 Aug 2025 12:44:37 -0700
Subject: [PATCH] Fix: Cards were misaligned on older browsers Fix: Some cards
 had blue focus outline on TVs

---
 Theme/ElegantFin-theme-nightly.css | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css
index 643c474..483c40a 100644
--- a/Theme/ElegantFin-theme-nightly.css
+++ b/Theme/ElegantFin-theme-nightly.css
@@ -196,11 +196,7 @@ html {
     color: var(--borderColor);
 }
 
-.card {
-    padding: .375em;
-    transition: width .5s;
-}
-
+.card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: white !important;
 }
@@ -840,8 +836,17 @@ html {
 .card {
     --effectiveWidth: calc((99vw - (var(--sidePadding) * 2)));
     --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap));
-    box-sizing: border-box;
     width: var(--cardWidth) !important;
+    padding: .375em;
+    transition: width .5s;
+    box-sizing: content-box;
+}
+
+/* this makes the cards bigger and center aligned on older browsers */
+@supports (aspect-ratio: 1 / 1) {
+    .card {
+        box-sizing: border-box;
+    }
 }
 
 .layout-mobile .card {