From 89d2d34453afde3efa87191c17219b59c8e9a425 Mon Sep 17 00:00:00 2001
From: ryan-crabbe-berri <ryan@berri.ai>
Date: Tue, 25 Aug 2026 17:34:45 -0700
Subject: [PATCH] fix(ui): lint z-index utilities behind arbitrary Tailwind
 variants

The variant prefix pattern only understood word variants, so
data-[side=top]:z-50 or [&>*]:z-[5] slipped past the rule. Parse the
utility as everything after the last top-level colon (brackets and
parens nest) and also strip the important marker. Formats the two files
prettier flagged in CI
---
 .../eslint-rules/no-ad-hoc-z-index.mjs        | 29 ++++++++++++++++---
 .../components/EntityUsage/TopKeyView.tsx     |  5 +++-
 .../eslint-rules/no-ad-hoc-z-index.test.ts    | 24 +++++++++++++--
 3 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/ui/litellm-dashboard/scripts/eslint-rules/no-ad-hoc-z-index.mjs b/ui/litellm-dashboard/scripts/eslint-rules/no-ad-hoc-z-index.mjs
index fbe0fdcf7e5..6af86d2c501 100644
--- a/ui/litellm-dashboard/scripts/eslint-rules/no-ad-hoc-z-index.mjs
+++ b/ui/litellm-dashboard/scripts/eslint-rules/no-ad-hoc-z-index.mjs
@@ -1,9 +1,30 @@
-const AD_HOC_Z = /^(?:[\w-]+:)*-?z-(?:\d+|\[[^\]]*\]|\([^)]*\))$/;
-const POPUP_Z = /^(?:[\w-]+:)*z-popup$/;
+const AD_HOC_Z = /^-?z-(?:\d+|\[[^\]]*\]|\([^)]*\))$/;
+
+const OPENERS = { "[": "]", "(": ")" };
+
+const utilityOf = (token) => {
+  const closers = [];
+  const lastTopLevelColon = [...token].reduce((found, ch, i) => {
+    if (closers.length > 0 && ch === closers[closers.length - 1]) {
+      closers.pop();
+      return found;
+    }
+    if (ch in OPENERS) {
+      closers.push(OPENERS[ch]);
+      return found;
+    }
+    return ch === ":" && closers.length === 0 ? i : found;
+  }, -1);
+  return token
+    .slice(lastTopLevelColon + 1)
+    .replace(/^!/, "")
+    .replace(/!$/, "");
+};
 
 const classify = (token, allowPopupLayer) => {
-  if (AD_HOC_Z.test(token)) return "adHoc";
-  if (!allowPopupLayer && POPUP_Z.test(token)) return "popupReserved";
+  const utility = utilityOf(token);
+  if (AD_HOC_Z.test(utility)) return "adHoc";
+  if (!allowPopupLayer && utility === "z-popup") return "popupReserved";
   return null;
 };
 
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
index 975fbd6d623..df1a51d8e38 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
@@ -246,7 +246,10 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
       )}
 
       {isModalOpen && selectedKey && keyData && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-overlay" onClick={handleOutsideClick}>
+        <div
+          className="fixed inset-0 bg-black/50 flex items-center justify-center z-overlay"
+          onClick={handleOutsideClick}
+        >
           <div className="bg-card rounded-lg shadow-xl relative w-11/12 max-w-6xl max-h-[90vh] overflow-y-auto min-h-[750px]">
             {/* Close button */}
             <button
diff --git a/ui/litellm-dashboard/tests/eslint-rules/no-ad-hoc-z-index.test.ts b/ui/litellm-dashboard/tests/eslint-rules/no-ad-hoc-z-index.test.ts
index a24dff14764..757fbf12f46 100644
--- a/ui/litellm-dashboard/tests/eslint-rules/no-ad-hoc-z-index.test.ts
+++ b/ui/litellm-dashboard/tests/eslint-rules/no-ad-hoc-z-index.test.ts
@@ -21,10 +21,14 @@ ruleTester.run("no-ad-hoc-z-index", rule as never, {
     'const c = "team-xyz-789";',
     'const c = "bg-gray-50 text-gray-900";',
     "const c = `flex ${open ? 'z-overlay' : ''}`;",
-    "const el = <div className=\"absolute z-floating\" />;",
+    'const el = <div className="absolute z-floating" />;',
     "const style = { position: 'fixed', top: 0 };",
     { code: 'const c = "isolate z-popup";', options: [{ allowPopupLayer: true }] },
     { code: 'const c = "data-[side=top]:z-popup";', options: [{ allowPopupLayer: true }] },
+    { code: 'const c = "[&:hover]:z-popup";', options: [{ allowPopupLayer: true }] },
+    'const c = "data-[side=top]:z-floating";',
+    'const c = "[&>[data-z-50]]:z-overlay";',
+    'const c = "z-overlay!";',
   ],
   invalid: [
     { code: 'const c = "fixed inset-0 z-50";', errors: [{ messageId: "adHoc", data: { token: "z-50" } }] },
@@ -36,12 +40,28 @@ ruleTester.run("no-ad-hoc-z-index", rule as never, {
     { code: 'const c = "z-(--my-z)";', errors: [{ messageId: "adHoc", data: { token: "z-(--my-z)" } }] },
     { code: 'const c = "md:z-50";', errors: [{ messageId: "adHoc", data: { token: "md:z-50" } }] },
     { code: 'const c = "hover:md:z-[2]";', errors: [{ messageId: "adHoc", data: { token: "hover:md:z-[2]" } }] },
+    {
+      code: 'const c = "data-[side=top]:z-50";',
+      errors: [{ messageId: "adHoc", data: { token: "data-[side=top]:z-50" } }],
+    },
+    { code: 'const c = "[&>*]:z-[5]";', errors: [{ messageId: "adHoc", data: { token: "[&>*]:z-[5]" } }] },
+    { code: 'const c = "[&:hover]:z-10";', errors: [{ messageId: "adHoc", data: { token: "[&:hover]:z-10" } }] },
+    {
+      code: 'const c = "group-data-[state=open]:z-(--x)";',
+      errors: [{ messageId: "adHoc", data: { token: "group-data-[state=open]:z-(--x)" } }],
+    },
+    { code: 'const c = "!z-50";', errors: [{ messageId: "adHoc", data: { token: "!z-50" } }] },
+    { code: 'const c = "md:z-50!";', errors: [{ messageId: "adHoc", data: { token: "md:z-50!" } }] },
+    {
+      code: 'const c = "data-[side=top]:z-popup";',
+      errors: [{ messageId: "popupReserved", data: { token: "data-[side=top]:z-popup" } }],
+    },
     {
       code: "const c = `max-h-full ${extra} z-[1100]`;",
       errors: [{ messageId: "adHoc", data: { token: "z-[1100]" } }],
     },
     {
-      code: "const el = <div className=\"fixed inset-0 z-50\" />;",
+      code: 'const el = <div className="fixed inset-0 z-50" />;',
       errors: [{ messageId: "adHoc", data: { token: "z-50" } }],
     },
     {