Avoid elements being incorrectly blocked by Brave (#36513)

EasyList Cookie, the blocking list used by Brave to block cookie notices, [blocks elements with `.bottom-4` on convex.dev](https://github.com/easylist/easylist/blob/54378db24d7c56f0bf488d7b7825966d9f4a573e/easylist_cookie/easylist_cookie_specific_hide.txt#L3471), presumably to block the cookie notice component on website/docs that uses this class. As a consequence of this, all elements in the dashboard using `.bottom-4` are currently blocked by Brave by default. I’m creating a class with a different name to avoid breaking some dashboard features for Brave users. This PR also adds an ESLint rule to make sure we won’t use `.bottom-4` somewhere else by mistake.

GitOrigin-RevId: ccaa22670e143f19edc0b1836092a68030d98104

Author: Nicolapps

npm-packages/dashboard-common/.eslintrc.cjs

@@ -118,6 +118,11 @@ module.exports = {
         message: "Don't use background colors for text",
         selector: "Literal[value=/^text-background-.*$/i]",
       },
+      {
+        message:
+          ".bottom-4 is blocked on convex.dev by easylist_cookie; use .bottom-four instead",
+        selector: "Literal[value=/bottom-4(?:\\D|$)/i]",
+      },
     ],
     // allow (_arg: number) => {}
     "@typescript-eslint/no-unused-vars": [
@@ -166,6 +171,13 @@ module.exports = {
     // Makes it harder to accidentally fire off a promise without waiting for it.
     "@typescript-eslint/no-floating-promises": "error",
     "no-void": "off",
+
+    "tailwindcss/no-custom-classname": [
+      "error",
+      {
+        whitelist: ["bottom-four"],
+      },
+    ],
   },
   overrides: [
     {

npm-packages/dashboard-common/src/styles/globals.css

@@ -127,3 +127,10 @@ body {
     @apply border-b;
   }
 }
+
+@layer utilities {
+  /* Alias for .bottom-4 to avoid false positives with easylist_cookie */
+  .bottom-four {
+    @apply bottom-4;
+  }
+}

npm-packages/dashboard/src/components/billing/TeamUsageByFunctionChart.tsx

@@ -129,7 +129,7 @@ export function TeamUsageByFunctionChart({
 
         {!showAll && nonZeroRows.length > ITEMS_SHOWN_INITIALLY && (
           <div className="h-4">
-            <div className="pointer-events-none absolute bottom-4 h-24 w-full bg-gradient-to-b from-transparent to-background-secondary" />
+            <div className="bottom-four pointer-events-none absolute h-24 w-full bg-gradient-to-b from-transparent to-background-secondary" />
             <div className="absolute bottom-0 left-[50%]">
               <Button
                 className="-translate-x-1/2"

npm-packages/dashboard/src/elements/CommandPalette.tsx

@@ -188,7 +188,7 @@ function DeleteProjectsPage({ onClose }: { onClose: () => void }) {
         <Command.Item
           className={cn(
             buttonClasses({ size: "xs", variant: "neutral" }),
-            "absolute bottom-4 right-4 z-20 flex items-center gap-4 text-xs",
+            "absolute bottom-four right-4 z-20 flex items-center gap-4 text-xs",
           )}
           data-button
           onSelect={handleDeleteProjects}