From 31bb11eab8d05e866831e26511443819ffe42f3b Mon Sep 17 00:00:00 2001
From: roaring30s <okaaycrypto@gmail.com>
Date: Tue, 13 Jan 2026 12:28:05 -0500
Subject: [PATCH 1/3] fix: change UI for dropdowns

---
 components/PerformanceListSelector/index.tsx | 82 ++++++++---------
 pages/leaderboard.tsx                        | 94 +++++++++++++++-----
 2 files changed, 106 insertions(+), 70 deletions(-)

diff --git a/components/PerformanceListSelector/index.tsx b/components/PerformanceListSelector/index.tsx
index faa9080f..a84288c7 100644
--- a/components/PerformanceListSelector/index.tsx
+++ b/components/PerformanceListSelector/index.tsx
@@ -61,23 +61,44 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
   }
 
   return (
-    <>
+    <Box
+      css={{
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+      }}
+    >
       <Box
         as="select"
         value={indexOfSelectedOption}
         onChange={handleSelectChange}
         css={{
-          paddingTop: "$1",
-          paddingBottom: "$1",
-          paddingLeft: "$2",
-          border: "none",
+          paddingTop: "$2",
+          paddingBottom: "$2",
+          paddingLeft: "$3",
+          paddingRight: "$6",
+          border: "1px solid $colors$neutral4",
+          borderRadius: "$2",
           backgroundColor: "$panel",
+          color: "$hiContrast",
+          fontSize: "$2",
+          fontWeight: 500,
           appearance: "none",
-          paddingRight: "$5",
+          cursor: "pointer",
+          transition: "all 0.2s",
           maxWidth: "50%", // Ensure the dropdown doesn't exceed the container width
           "@bp2": {
             maxWidth: "100%", // Remove margin-bottom for larger screens
           },
+          "&:hover": {
+            borderColor: "$neutral6",
+            backgroundColor: "$neutral2",
+          },
+          "&:focus": {
+            outline: "none",
+            borderColor: "$primary9",
+            boxShadow: "0 0 0 1px $colors$primary9",
+          },
         }}
       >
         <Box as="option" key="-1" value={-1}>
@@ -89,49 +110,13 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
           </Box>
         ) : (
           <>
-            <Box
-              as="option"
-              disabled
-              css={{
-                paddingTop: "$1",
-                paddingBottom: "$1",
-                paddingLeft: "$2",
-                border: "none",
-                backgroundColor: "$panel",
-                appearance: "none",
-                paddingRight: "$5",
-              }}
-            >
+            <Box as="option" disabled>
               ----------------
             </Box>
-            <Box
-              as="option"
-              disabled
-              css={{
-                paddingTop: "$1",
-                paddingBottom: "$1",
-                paddingLeft: "$2",
-                border: "none",
-                backgroundColor: "$panel",
-                appearance: "none",
-                paddingRight: "$5",
-              }}
-            >
+            <Box as="option" disabled>
               AI Pipelines
             </Box>
-            <Box
-              as="option"
-              disabled
-              css={{
-                paddingTop: "$1",
-                paddingBottom: "$1",
-                paddingLeft: "$2",
-                border: "none",
-                backgroundColor: "$panel",
-                appearance: "none",
-                paddingRight: "$5",
-              }}
-            >
+            <Box as="option" disabled>
               ----------------
             </Box>
             {availPipelines?.pipelines?.map((p, pindex) =>
@@ -151,10 +136,15 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
       <Box
         as={ChevronDownIcon}
         css={{
+          position: "absolute",
+          right: "$2",
           pointerEvents: "none",
+          color: "$neutral9",
+          width: "$4",
+          height: "$4",
         }}
       />
-    </>
+    </Box>
   );
 };
 
diff --git a/pages/leaderboard.tsx b/pages/leaderboard.tsx
index ee0c8b46..8544a3a6 100644
--- a/pages/leaderboard.tsx
+++ b/pages/leaderboard.tsx
@@ -133,35 +133,73 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
                   },
                 }}
               >
-                <Flex css={{ marginRight: "$2" }}>Region:</Flex>
-                <Box
-                  as="select"
-                  onChange={(e) => {
-                    setRegion(e.target.value as Region["id"]);
-                  }}
+                <Flex
                   css={{
-                    paddingTop: "$1",
-                    paddingBottom: "$1",
-                    paddingLeft: "$2",
-                    border: "none",
-                    backgroundColor: "$panel",
-                    appearance: "none",
+                    marginRight: "$2",
+                    fontSize: "$2",
+                    color: "$hiContrast",
                   }}
                 >
-                  {availableRegions.map((region) => {
-                    return (
-                      <Box as="option" key={region.id} value={region.id}>
-                        {region.name}
-                      </Box>
-                    );
-                  })}
-                </Box>
+                  Region:
+                </Flex>
                 <Box
-                  as={ChevronDownIcon}
                   css={{
-                    pointerEvents: "none",
+                    position: "relative",
+                    display: "inline-flex",
+                    alignItems: "center",
                   }}
-                />
+                >
+                  <Box
+                    as="select"
+                    onChange={(e) => {
+                      setRegion(e.target.value as Region["id"]);
+                    }}
+                    value={region}
+                    css={{
+                      paddingTop: "$2",
+                      paddingBottom: "$2",
+                      paddingLeft: "$3",
+                      paddingRight: "$6",
+                      border: "1px solid $colors$neutral4",
+                      borderRadius: "$2",
+                      backgroundColor: "$panel",
+                      color: "$hiContrast",
+                      fontSize: "$2",
+                      fontWeight: 500,
+                      appearance: "none",
+                      cursor: "pointer",
+                      transition: "all 0.2s",
+                      "&:hover": {
+                        borderColor: "$neutral6",
+                        backgroundColor: "$neutral2",
+                      },
+                      "&:focus": {
+                        outline: "none",
+                        borderColor: "$primary9",
+                        boxShadow: "0 0 0 1px $colors$primary9",
+                      },
+                    }}
+                  >
+                    {availableRegions.map((region) => {
+                      return (
+                        <Box as="option" key={region.id} value={region.id}>
+                          {region.name}
+                        </Box>
+                      );
+                    })}
+                  </Box>
+                  <Box
+                    as={ChevronDownIcon}
+                    css={{
+                      position: "absolute",
+                      right: "$2",
+                      pointerEvents: "none",
+                      color: "$neutral9",
+                      width: "$4",
+                      height: "$4",
+                    }}
+                  />
+                </Box>
               </Flex>
               <Flex
                 css={{
@@ -174,7 +212,15 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
                   },
                 }}
               >
-                <Flex css={{ marginRight: "$2" }}>Type:</Flex>
+                <Flex
+                  css={{
+                    marginRight: "$2",
+                    fontSize: "$2",
+                    color: "$hiContrast",
+                  }}
+                >
+                  Type:
+                </Flex>
                 <PerformanceListSelector
                   selectedPipeline={selectedPipeline}
                   setSelectedPipeline={setSelectedPipeline}

From 24130ddf8d8ce6433de9162211517ff58b56c40d Mon Sep 17 00:00:00 2001
From: roaring30s <okaaycrypto@gmail.com>
Date: Tue, 13 Jan 2026 12:48:13 -0500
Subject: [PATCH 2/3] style: improve Performance Leaderboard dropdown styling
 to match design system

---
 components/PerformanceListSelector/index.tsx | 11 +++++++++--
 pages/leaderboard.tsx                        | 13 +++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/PerformanceListSelector/index.tsx b/components/PerformanceListSelector/index.tsx
index a84288c7..b1442df0 100644
--- a/components/PerformanceListSelector/index.tsx
+++ b/components/PerformanceListSelector/index.tsx
@@ -77,7 +77,7 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
           paddingBottom: "$2",
           paddingLeft: "$3",
           paddingRight: "$6",
-          border: "1px solid $colors$neutral4",
+          border: "none",
           borderRadius: "$2",
           backgroundColor: "$panel",
           color: "$hiContrast",
@@ -91,7 +91,6 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
             maxWidth: "100%", // Remove margin-bottom for larger screens
           },
           "&:hover": {
-            borderColor: "$neutral6",
             backgroundColor: "$neutral2",
           },
           "&:focus": {
@@ -99,6 +98,14 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
             borderColor: "$primary9",
             boxShadow: "0 0 0 1px $colors$primary9",
           },
+          "& option": {
+            backgroundColor: "$panel",
+            color: "$hiContrast",
+          },
+          "& option:hover, & option:focus": {
+            backgroundColor: "rgba(0,235,136,.1)",
+            color: "$primary",
+          },
         }}
       >
         <Box as="option" key="-1" value={-1}>
diff --git a/pages/leaderboard.tsx b/pages/leaderboard.tsx
index 8544a3a6..ed2a6e20 100644
--- a/pages/leaderboard.tsx
+++ b/pages/leaderboard.tsx
@@ -147,6 +147,7 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
                     position: "relative",
                     display: "inline-flex",
                     alignItems: "center",
+                    minWidth: "180px",
                   }}
                 >
                   <Box
@@ -156,11 +157,12 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
                     }}
                     value={region}
                     css={{
+                      width: "100%",
                       paddingTop: "$2",
                       paddingBottom: "$2",
                       paddingLeft: "$3",
                       paddingRight: "$6",
-                      border: "1px solid $colors$neutral4",
+                      border: "none",
                       borderRadius: "$2",
                       backgroundColor: "$panel",
                       color: "$hiContrast",
@@ -170,7 +172,6 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
                       cursor: "pointer",
                       transition: "all 0.2s",
                       "&:hover": {
-                        borderColor: "$neutral6",
                         backgroundColor: "$neutral2",
                       },
                       "&:focus": {
@@ -178,6 +179,14 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
                         borderColor: "$primary9",
                         boxShadow: "0 0 0 1px $colors$primary9",
                       },
+                      "& option": {
+                        backgroundColor: "$panel",
+                        color: "$hiContrast",
+                      },
+                      "& option:hover, & option:focus": {
+                        backgroundColor: "rgba(0,235,136,.1)",
+                        color: "$primary",
+                      },
                     }}
                   >
                     {availableRegions.map((region) => {

From 53e5d6be9fdb7805e162e378bd9dffcc6e85dec0 Mon Sep 17 00:00:00 2001
From: roaring30s <okaaycrypto@gmail.com>
Date: Tue, 13 Jan 2026 18:11:50 -0500
Subject: [PATCH 3/3] style: improve leaderboard dropdown styling and
 consistency

---
 components/PerformanceListSelector/index.tsx | 26 +++++++++++++++-----
 pages/leaderboard.tsx                        |  2 ++
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/components/PerformanceListSelector/index.tsx b/components/PerformanceListSelector/index.tsx
index b1442df0..e1d806e4 100644
--- a/components/PerformanceListSelector/index.tsx
+++ b/components/PerformanceListSelector/index.tsx
@@ -57,7 +57,18 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
   };
 
   if (isValidating) {
-    return <Skeleton css={{ height: 20, width: 100 }} />;
+    return (
+      <Skeleton
+        css={{
+          height: 30,
+          width: 200,
+          borderRadius: "$2",
+          "@bp2": {
+            width: 350,
+          },
+        }}
+      />
+    );
   }
 
   return (
@@ -66,6 +77,10 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
         position: "relative",
         display: "inline-flex",
         alignItems: "center",
+        width: 200,
+        "@bp2": {
+          width: 350,
+        },
       }}
     >
       <Box
@@ -73,6 +88,7 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
         value={indexOfSelectedOption}
         onChange={handleSelectChange}
         css={{
+          width: "100%",
           paddingTop: "$2",
           paddingBottom: "$2",
           paddingLeft: "$3",
@@ -81,15 +97,12 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
           borderRadius: "$2",
           backgroundColor: "$panel",
           color: "$hiContrast",
+          fontFamily: "$body",
           fontSize: "$2",
           fontWeight: 500,
           appearance: "none",
           cursor: "pointer",
           transition: "all 0.2s",
-          maxWidth: "50%", // Ensure the dropdown doesn't exceed the container width
-          "@bp2": {
-            maxWidth: "100%", // Remove margin-bottom for larger screens
-          },
           "&:hover": {
             backgroundColor: "$neutral2",
           },
@@ -101,6 +114,7 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
           "& option": {
             backgroundColor: "$panel",
             color: "$hiContrast",
+            fontFamily: "$body",
           },
           "& option:hover, & option:focus": {
             backgroundColor: "rgba(0,235,136,.1)",
@@ -108,7 +122,7 @@ const PerformanceListSelector: React.FC<PerformanceSelectorProps> = ({
           },
         }}
       >
-        <Box as="option" key="-1" value={-1}>
+        <Box as="option" key="-1" value={-1} css={{ fontFamily: "$body" }}>
           Transcoding
         </Box>
         {availPipelines?.pipelines?.length === 0 ? (
diff --git a/pages/leaderboard.tsx b/pages/leaderboard.tsx
index ed2a6e20..24803d6c 100644
--- a/pages/leaderboard.tsx
+++ b/pages/leaderboard.tsx
@@ -166,6 +166,7 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
                       borderRadius: "$2",
                       backgroundColor: "$panel",
                       color: "$hiContrast",
+                      fontFamily: "$body",
                       fontSize: "$2",
                       fontWeight: 500,
                       appearance: "none",
@@ -182,6 +183,7 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
                       "& option": {
                         backgroundColor: "$panel",
                         color: "$hiContrast",
+                        fontFamily: "$body",
                       },
                       "& option:hover, & option:focus": {
                         backgroundColor: "rgba(0,235,136,.1)",