From 17a3939061e3ef4d94f906ebc9131e8d8eef6f9b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 10 Jun 2024 20:50:21 +0800
Subject: [PATCH] Use data attr instead

The JSX className modification classes with this DOM-based modification
---
 src/components/media.jsx  | 2 +-
 src/components/status.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index 82d48a05..60054d48 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -374,7 +374,7 @@ function Media({
                         Math.abs(naturalAspectRatio - displayAspectRatio) <
                           similarThreshold
                       ) {
-                        $media.classList.add('has-natural-aspect-ratio');
+                        $media.dataset.hasNaturalAspectRatio = true;
                       }
                       // $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
                     }
diff --git a/src/components/status.css b/src/components/status.css
index 7f88042b..2f4c1488 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -1071,7 +1071,7 @@
   width: min(var(--aspectWidth), var(--width), 100%);
   max-height: min(var(--height), 33vh);
 
-  &.has-natural-aspect-ratio {
+  &[data-has-natural-aspect-ratio] {
     --media-radius: 4px;
   }
 }