From 4c4f57c6e5a6c2d5908e9dea5328e9f5d02a5268 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 13 Jan 2026 20:29:38 -0500
Subject: [PATCH] Replace inline styles with classes

---
 components/video-modal.html |  3 +--
 css/tailwind.source.css     | 29 ++++++++++++++++++++++++++++-
 docs/popover-scenarios.html |  2 +-
 js/utils/qrcode.js          | 12 ++++++++++--
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index c6b0068b..799b788c 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -269,9 +269,8 @@
                       <span class="video-modal__reaction-meter-label" data-reaction-meter-label>No reactions yet</span>
                       <div class="video-modal__reaction-meter-track" aria-hidden="true">
                         <div
-                          class="video-modal__reaction-meter-fill"
+                          class="video-modal__reaction-meter-fill video-modal__reaction-meter-fill--empty"
                           data-reaction-meter-fill
-                          style="width: 0%"
                         ></div>
                       </div>
                       <span class="sr-only" data-reaction-meter-sr>No reactions yet</span>
diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 81ced014..b0892458 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -2435,7 +2435,6 @@
     inset-inline-start: 0;
     inset-block-start: 0;
     block-size: 100%;
-    inline-size: 0%;
     max-inline-size: 100%;
     background-image: linear-gradient(
       90deg,
@@ -2445,6 +2444,11 @@
     transition: inline-size var(--motion-duration-base) var(--motion-ease-out);
   }
 
+  .video-modal__reaction-meter-fill--empty {
+    inline-size: 0%;
+    width: 0%;
+  }
+
   .video-modal__actions-group {
     @apply flex basis-full flex-wrap items-start justify-start gap-3 md:basis-auto md:justify-end;
   }
@@ -3321,6 +3325,29 @@
     padding: var(--space-md);
   }
 
+  .docs-popover-scenarios__scroll-spacer {
+    height: 45rem;
+  }
+
+  .qr-code__table {
+    border: 0;
+    border-collapse: collapse;
+  }
+
+  .qr-code__cell {
+    border: 0;
+    border-collapse: collapse;
+    padding: 0;
+    margin: 0;
+    width: var(--qr-code-cell-width);
+    height: var(--qr-code-cell-height);
+    background-color: var(--qr-code-color-light);
+  }
+
+  .qr-code__cell--dark {
+    background-color: var(--qr-code-color-dark);
+  }
+
   .fade-in {
     opacity: 0;
     animation: interface-fade-in 280ms ease-out forwards;
diff --git a/docs/popover-scenarios.html b/docs/popover-scenarios.html
index 607c51cb..c288504a 100644
--- a/docs/popover-scenarios.html
+++ b/docs/popover-scenarios.html
@@ -129,7 +129,7 @@
           class="h-64 overflow-auto rounded-xl border border-border bg-surface-alt p-md"
           data-test-scroll-region
         >
-          <div class="space-y-lg" style="height: 720px">
+          <div class="space-y-lg docs-popover-scenarios__scroll-spacer">
             <p class="text-sm text-muted">
               Scroll to the bottom to find the trigger used in automated tests.
             </p>
diff --git a/js/utils/qrcode.js b/js/utils/qrcode.js
index 1fc7fc72..001aa787 100644
--- a/js/utils/qrcode.js
+++ b/js/utils/qrcode.js
@@ -254,13 +254,21 @@ if (hasDocument) {
 			var nCount = oQRCode.getModuleCount();
 			var nWidth = Math.floor(_htOption.width / nCount);
 			var nHeight = Math.floor(_htOption.height / nCount);
-			var aHTML = ['<table style="border:0;border-collapse:collapse;">'];
+			var aHTML = ['<table class="qr-code__table">'];
+
+			_el.style.setProperty("--qr-code-color-dark", _htOption.colorDark);
+			_el.style.setProperty("--qr-code-color-light", _htOption.colorLight);
+			_el.style.setProperty("--qr-code-cell-width", nWidth + "px");
+			_el.style.setProperty("--qr-code-cell-height", nHeight + "px");
 			
 			for (var row = 0; row < nCount; row++) {
 				aHTML.push('<tr>');
 				
 				for (var col = 0; col < nCount; col++) {
-					aHTML.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:' + nWidth + 'px;height:' + nHeight + 'px;background-color:' + (oQRCode.isDark(row, col) ? _htOption.colorDark : _htOption.colorLight) + ';"></td>');
+					var cellClass = oQRCode.isDark(row, col)
+						? "qr-code__cell qr-code__cell--dark"
+						: "qr-code__cell";
+					aHTML.push('<td class="' + cellClass + '"></td>');
 				}
 				
 				aHTML.push('</tr>');