From c9680b5677dd09066ec3edc8032345d0d27959c7 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Tue, 10 Mar 2026 21:36:07 -0600
Subject: [PATCH 1/3] fix: improve leaderboard heading on mobile

---
 pages/leaderboard.tsx | 58 ++++++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/pages/leaderboard.tsx b/pages/leaderboard.tsx
index 24803d6c..cf0eb571 100644
--- a/pages/leaderboard.tsx
+++ b/pages/leaderboard.tsx
@@ -87,26 +87,27 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
           }}
         >
           <Flex
-            justify="between"
             css={{
-              width: "100%",
-              flexDirection: "column", // Default to column for mobile
-              marginBottom: "0",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              marginBottom: "$4",
+              alignItems: "center",
               "@bp2": {
-                flexDirection: "row", // Change to row for larger screens
+                flexDirection: "row",
                 marginBottom: "$4",
               },
             }}
           >
             <Heading
-              size="3"
+              size="2"
               as="h1"
               css={{
                 fontWeight: 700,
-                fontSize: 26,
-                marginBottom: "$2",
-                "@bp3": {
+                marginBottom: "$3",
+                textAlign: "center",
+                "@bp2": {
                   marginBottom: "0",
+                  textAlign: "left",
                 },
               }}
             >
@@ -115,27 +116,34 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
             <Flex
               css={{
                 fontSize: "$2",
-                flexDirection: "column", // Default to column for mobile
+                flexDirection: "column",
+                alignItems: "center",
+                rowGap: "$2",
+                width: "100%",
+                "@bp1": {
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  justifyContent: "center",
+                  columnGap: "$4",
+                },
                 "@bp2": {
-                  flexDirection: "row", // Change to row for larger screens
+                  width: "auto",
+                  flexWrap: "nowrap",
                 },
               }}
             >
               <Flex
                 css={{
-                  flexDirection: "row", // Stack title and dropdown vertically on mobile
+                  flexDirection: "row",
                   alignItems: "center",
-                  marginBottom: "$2", // Add margin-bottom for spacing when stacked
-                  marginLeft: "$2", // Add margin-left for spacing between groups
-                  "@bp2": {
-                    marginBottom: "0", // Remove margin-bottom for larger screens
-                    marginRight: "$4", // Add margin-right for spacing between groups
-                  },
+                  justifyContent: "center",
+                  gap: "$2",
+                  width: "100%",
+                  "@bp1": { width: "auto" },
                 }}
               >
                 <Flex
                   css={{
-                    marginRight: "$2",
                     fontSize: "$2",
                     color: "$hiContrast",
                   }}
@@ -214,18 +222,16 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
               </Flex>
               <Flex
                 css={{
-                  flexDirection: "row", // Align title and dropdown horizontally
+                  flexDirection: "row",
                   alignItems: "center",
-                  marginBottom: "$2", // Add margin-bottom for spacing when stacked
-                  marginLeft: "$2", // Add margin-left for spacing between groups
-                  "@bp2": {
-                    marginBottom: "0", // Remove margin-bottom for larger screens
-                  },
+                  justifyContent: "center",
+                  gap: "$2",
+                  width: "100%",
+                  "@bp1": { width: "auto" },
                 }}
               >
                 <Flex
                   css={{
-                    marginRight: "$2",
                     fontSize: "$2",
                     color: "$hiContrast",
                   }}

From db9c6a3a704a450214fe3ac1694b53152592b81e Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Tue, 17 Mar 2026 15:04:01 -0600
Subject: [PATCH 2/3] feat: make all headings left-aligned on mobile

---
 pages/index.tsx         | 96 +++++++++++++++++++++++++++++++++++++----
 pages/leaderboard.tsx   | 13 +++---
 pages/orchestrators.tsx | 61 +++++++++++++++++++-------
 3 files changed, 139 insertions(+), 31 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 828343e8..c10009e9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -370,17 +370,41 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
               <Flex
                 css={{
                   flexDirection: "column",
+                  alignItems: "flex-start",
+                  width: "100%",
                   "@bp1": {
                     flexDirection: "row",
+                    alignItems: "center",
+                    width: "auto",
                   },
                 }}
-                align="center"
               >
-                <Heading size="2" css={{ fontWeight: 600 }}>
+                <Heading
+                  size="2"
+                  css={{
+                    fontWeight: 600,
+                    width: "100%",
+                    textAlign: "left",
+                    "@bp1": {
+                      width: "auto",
+                    },
+                  }}
+                >
                   Orchestrators
                 </Heading>
               </Flex>
-              <Flex align="center">
+              <Flex
+                css={{
+                  width: "100%",
+                  justifyContent: "space-between",
+                  flexWrap: "nowrap",
+                  "@bp1": {
+                    width: "auto",
+                    justifyContent: "flex-start",
+                  },
+                }}
+                align="center"
+              >
                 {(process.env.NEXT_PUBLIC_NETWORK == "MAINNET" ||
                   process.env.NEXT_PUBLIC_NETWORK == "ARBITRUM_ONE") && (
                   <A as={Link} href="/leaderboard" passHref>
@@ -389,7 +413,14 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                       css={{
                         color: "$hiContrast",
                         fontSize: "$2",
-                        marginRight: "$2",
+                        paddingLeft: 0,
+                        paddingRight: 0,
+                        marginRight: 0,
+                        "@bp1": {
+                          paddingLeft: "$2",
+                          paddingRight: "$2",
+                          marginRight: "$2",
+                        },
                       }}
                     >
                       Performance Leaderboard
@@ -397,7 +428,19 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                   </A>
                 )}
                 <A as={Link} href="/orchestrators" passHref>
-                  <Button ghost css={{ color: "$hiContrast", fontSize: "$2" }}>
+                  <Button
+                    ghost
+                    css={{
+                      color: "$hiContrast",
+                      fontSize: "$2",
+                      paddingLeft: 0,
+                      paddingRight: 0,
+                      "@bp1": {
+                        paddingLeft: "$2",
+                        paddingRight: "$2",
+                      },
+                    }}
+                  >
                     View All
                     <Box as={ArrowRightIcon} css={{ marginLeft: "$1" }} />
                   </Button>
@@ -442,19 +485,54 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
               <Flex
                 css={{
                   flexDirection: "column",
+                  alignItems: "flex-start",
+                  width: "100%",
                   "@bp1": {
                     flexDirection: "row",
+                    alignItems: "center",
+                    width: "auto",
                   },
                 }}
-                align="center"
               >
-                <Heading size="2" css={{ fontWeight: 600 }}>
+                <Heading
+                  size="2"
+                  css={{
+                    fontWeight: 600,
+                    width: "100%",
+                    textAlign: "left",
+                    "@bp1": {
+                      width: "auto",
+                    },
+                  }}
+                >
                   Transactions
                 </Heading>
               </Flex>
-              <Flex align="center">
+              <Flex
+                css={{
+                  width: "100%",
+                  justifyContent: "flex-start",
+                  "@bp1": {
+                    width: "auto",
+                    justifyContent: "flex-start",
+                  },
+                }}
+                align="center"
+              >
                 <A as={Link} href="/transactions" passHref>
-                  <Button ghost css={{ color: "$hiContrast", fontSize: "$2" }}>
+                  <Button
+                    ghost
+                    css={{
+                      color: "$hiContrast",
+                      fontSize: "$2",
+                      paddingLeft: 0,
+                      paddingRight: 0,
+                      "@bp1": {
+                        paddingLeft: "$2",
+                        paddingRight: "$2",
+                      },
+                    }}
+                  >
                     View All
                     <Box as={ArrowRightIcon} css={{ marginLeft: "$1" }} />
                   </Button>
diff --git a/pages/leaderboard.tsx b/pages/leaderboard.tsx
index cf0eb571..9a56288a 100644
--- a/pages/leaderboard.tsx
+++ b/pages/leaderboard.tsx
@@ -104,10 +104,11 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
               css={{
                 fontWeight: 700,
                 marginBottom: "$3",
-                textAlign: "center",
+                width: "100%",
+                textAlign: "left",
                 "@bp2": {
                   marginBottom: "0",
-                  textAlign: "left",
+                  width: "auto",
                 },
               }}
             >
@@ -117,13 +118,13 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
               css={{
                 fontSize: "$2",
                 flexDirection: "column",
-                alignItems: "center",
+                alignItems: "flex-start",
                 rowGap: "$2",
                 width: "100%",
                 "@bp1": {
                   flexDirection: "row",
                   flexWrap: "wrap",
-                  justifyContent: "center",
+                  justifyContent: "flex-start",
                   columnGap: "$4",
                 },
                 "@bp2": {
@@ -136,7 +137,7 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
                 css={{
                   flexDirection: "row",
                   alignItems: "center",
-                  justifyContent: "center",
+                  justifyContent: "flex-start",
                   gap: "$2",
                   width: "100%",
                   "@bp1": { width: "auto" },
@@ -224,7 +225,7 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
                 css={{
                   flexDirection: "row",
                   alignItems: "center",
-                  justifyContent: "center",
+                  justifyContent: "flex-start",
                   gap: "$2",
                   width: "100%",
                   "@bp1": { width: "auto" },
diff --git a/pages/orchestrators.tsx b/pages/orchestrators.tsx
index 84300b68..c47b70cc 100644
--- a/pages/orchestrators.tsx
+++ b/pages/orchestrators.tsx
@@ -71,24 +71,53 @@ const OrchestratorsPage = ({
               },
             }}
           >
-            <Heading size="2" as="h1" css={{ fontWeight: 700 }}>
+            <Heading
+              size="2"
+              as="h1"
+              css={{
+                fontWeight: 700,
+                width: "100%",
+                textAlign: "left",
+                marginBottom: "$2",
+                "@bp1": {
+                  width: "auto",
+                  marginBottom: "0",
+                },
+              }}
+            >
               Orchestrators
             </Heading>
-            {(process.env.NEXT_PUBLIC_NETWORK == "MAINNET" ||
-              process.env.NEXT_PUBLIC_NETWORK == "ARBITRUM_ONE") && (
-              <A as={Link} href="/leaderboard" passHref>
-                <Button
-                  ghost
-                  css={{
-                    color: "$hiContrast",
-                    fontSize: "$2",
-                  }}
-                >
-                  Performance Leaderboard
-                  <Box as={ArrowRightIcon} css={{ marginLeft: "$1" }} />
-                </Button>
-              </A>
-            )}
+            <Flex
+              css={{
+                width: "100%",
+                justifyContent: "flex-start",
+                "@bp1": {
+                  width: "auto",
+                },
+              }}
+            >
+              {(process.env.NEXT_PUBLIC_NETWORK == "MAINNET" ||
+                process.env.NEXT_PUBLIC_NETWORK == "ARBITRUM_ONE") && (
+                <A as={Link} href="/leaderboard" passHref>
+                  <Button
+                    ghost
+                    css={{
+                      color: "$hiContrast",
+                      fontSize: "$2",
+                      paddingLeft: 0,
+                      paddingRight: 0,
+                      "@bp1": {
+                        paddingLeft: "$2",
+                        paddingRight: "$2",
+                      },
+                    }}
+                  >
+                    Performance Leaderboard
+                    <Box as={ArrowRightIcon} css={{ marginLeft: "$1" }} />
+                  </Button>
+                </A>
+              )}
+            </Flex>
           </Flex>
           <Box css={{ marginBottom: "$5" }}>
             {showOrchList ? (

From 609de61ebfa7859d639b509eaeb1d4e231e1f2bf Mon Sep 17 00:00:00 2001
From: Rick Staa <rick.staa@outlook.com>
Date: Wed, 18 Mar 2026 10:27:06 +0100
Subject: [PATCH 3/3] fix: remove redundant justifyContent in Transactions
 section

The flex-start value inside @bp1 duplicated the default and the
parent-level declaration.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 pages/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index c10009e9..0e5b1782 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -514,7 +514,6 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                   justifyContent: "flex-start",
                   "@bp1": {
                     width: "auto",
-                    justifyContent: "flex-start",
                   },
                 }}
                 align="center"