Fix z-index in new front-end components (#2616)

stanford-crfm · May 7, 2024 · 4d87f3f · 4d87f3f
1 parent 4797a45
commit 4d87f3f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/helm-frontend/src/components/LeaderboardTables.tsx b/helm-frontend/src/components/LeaderboardTables.tsx
@@ -194,7 +194,7 @@ export default function LeaderboardTables({
                       headerValue.description ? headerValue.description : ""
                     }
                   >
-                    <div className="flex justify-between items-center min-w-48 w-48 max-w-48 text-wrap">
+                    <div className="z-20 flex justify-between items-center min-w-48 w-48 max-w-48 text-wrap">
                       <span className={`inline-block w-full break-words`}>
                         {getHeaderValue(headerValue)}
                       </span>
@@ -219,7 +219,7 @@ export default function LeaderboardTables({
                     <td
                       key={`${activeGroup}-${cellIdx}`}
                       className={`${
-                        cellIdx === 0 ? "text-lg sticky left-0" : ""
+                        cellIdx === 0 ? "z-20 text-lg sticky left-0" : "z-0"
                       } ${idx % 2 === 0 ? "bg-gray-50" : "bg-white"}`}
                     >
                       {cellIdx == 1 ? (
@@ -256,8 +256,8 @@ export default function LeaderboardTables({
                               : ""
                           } ${
                             cellIdx === 0
-                              ? "underline decoration-dashed decoration-gray-300"
-                              : ""
+                              ? "underline decoration-dashed decoration-gray-300 z-20"
+                              : "z-0"
                           }`}
                         >
                           <RowValue

diff --git a/helm-frontend/src/components/NavDropdown.tsx b/helm-frontend/src/components/NavDropdown.tsx
@@ -41,11 +41,11 @@ function NavDropdown() {
   }
 
   return (
-    <div className="dropdown">
+    <div className="dropdown z-40">
       <div
         tabIndex={0}
         role="button"
-        className="btn normal-case bg-white font-bold p-2 border-0 text-lg block whitespace-nowrap"
+        className="btn normal-case bg-white font-bold p-2 border-0 text-lg block whitespace-nowrap z-40"
         aria-haspopup="true"
         aria-controls="menu"
       >
@@ -62,7 +62,7 @@ function NavDropdown() {
         role="menu"
       >
         {projectMetadata.map((item, index) => (
-          <li key={index}>
+          <li key={index} className="z-40">
             <a
               href={getReleaseUrl(undefined, item.id)}
               className="block"