From 9d8cf9421554908e664382812108bcfe7f568d77 Mon Sep 17 00:00:00 2001
From: Jeffrey Holland <jholland@livefront.com>
Date: Fri, 22 Aug 2025 16:00:02 +0200
Subject: [PATCH] Use tailwind classes instead of custom sticky header class

---
 .../autofill/modal/credentials/fido2-create.component.html | 2 +-
 .../autofill/modal/credentials/fido2-vault.component.html  | 2 +-
 eslint.config.mjs                                          | 7 +------
 libs/components/src/tw-theme.css                           | 6 ------
 4 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
index fbd1d89eb01..6986fb12cc7 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
@@ -1,7 +1,7 @@
 <div class="tw-flex tw-flex-col tw-h-full tw-bg-background-alt">
   <bit-section
     disableMargin
-    class="tw-app-region-header-sticky tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
+    class="tw-sticky tw-top-0 tw-z-[1] tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
   >
     <bit-section-header class="tw-app-region-drag tw-bg-background">
       <div class="tw-flex tw-items-center">
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html
index e2989db5740..f1e73c7280d 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html
@@ -1,7 +1,7 @@
 <div class="tw-flex tw-flex-col tw-h-full">
   <bit-section
     disableMargin
-    class="tw-app-region-header-sticky tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
+    class="tw-sticky tw-top-0 tw-z-[1] tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
   >
     <bit-section-header class="tw-app-region-drag tw-bg-background">
       <div class="tw-flex tw-items-center">
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 577eacb92ff..e3f9c9272bb 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -184,12 +184,7 @@ export default tseslint.config(
         {
           // uses negative lookahead to whitelist any class that doesn't start with "tw-"
           // in other words: classnames that start with tw- must be valid TailwindCSS classes
-          whitelist: [
-            "(?!(tw)\\-).*",
-            "tw-app-region-drag",
-            "tw-app-region-no-drag",
-            "tw-app-region-header-sticky",
-          ],
+          whitelist: ["(?!(tw)\\-).*", "tw-app-region-drag", "tw-app-region-no-drag"],
         },
       ],
       "tailwindcss/enforces-negative-arbitrary-values": "error",
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index ae8b36a24bc..a4dbe8fe794 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -184,12 +184,6 @@
     -webkit-app-region: no-drag;
   }
 
-  .tw-app-region-header-sticky {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
-
   /**
   * Bootstrap uses z-index: 1050 for modals, dialogs and drag-and-drop previews should appear above them.
   * When bootstrap is removed, test if these styles are still needed and that overlays display properly over other content.