diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index df2a6e1d..02fbc6cf 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -492,7 +492,7 @@
 
   @media (min-width: theme("screens.md")) {
     .search-filters-panel.is-advanced-open {
-      width: 40rem;
+      width: var(--size-40rem);
     }
   }
 
diff --git a/css/tokens.css b/css/tokens.css
index e2020f53..4c7d1fae 100644
--- a/css/tokens.css
+++ b/css/tokens.css
@@ -321,6 +321,7 @@
   --size-20rem: 20rem;
   --size-28rem: 28rem;
   --size-34rem: 34rem;
+  --size-40rem: 40rem;
   --size-45rem: 45rem;
   --size-70rem: 70rem;
 
diff --git a/js/ui/components/SearchFilterModal.js b/js/ui/components/SearchFilterModal.js
index 8e1bdcbe..b30079a4 100644
--- a/js/ui/components/SearchFilterModal.js
+++ b/js/ui/components/SearchFilterModal.js
@@ -168,10 +168,10 @@ function toggleAdvanced(forceState = null) {
 
   if (newState) {
     advancedPanel.classList.remove("hidden");
-    advancedChevron.style.transform = "rotate(180deg)";
+    advancedChevron.classList.add("rotate-180");
   } else {
     advancedPanel.classList.add("hidden");
-    advancedChevron.style.transform = "rotate(0deg)";
+    advancedChevron.classList.remove("rotate-180");
   }
 }