Skip to content

style: improve leaderboard heading on mobile #589

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rickstaa merged 3 commits into from
Mar 18, 2026
Merged

style: improve leaderboard heading on mobile #589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c9680b5
fix: improve leaderboard heading on mobile
ECWireless Mar 11, 2026
db9c6a3
feat: make all headings left-aligned on mobile
ECWireless Mar 17, 2026
609de61
fix: remove redundant justifyContent in Transactions section
rickstaa Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 86 additions & 9 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -389,15 +413,34 @@ 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
</Button>
</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>
Expand Down Expand Up @@ -442,19 +485,53 @@ 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",
},
}}
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>
Expand Down
59 changes: 33 additions & 26 deletions pages/leaderboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,26 +87,28 @@ 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",
width: "100%",
textAlign: "left",
"@bp2": {
marginBottom: "0",
width: "auto",
},
}}
>
Expand All @@ -115,27 +117,34 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
<Flex
css={{
fontSize: "$2",
flexDirection: "column", // Default to column for mobile
flexDirection: "column",
alignItems: "flex-start",
rowGap: "$2",
width: "100%",
"@bp1": {
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "flex-start",
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: "flex-start",
gap: "$2",
width: "100%",
"@bp1": { width: "auto" },
}}
>
<Flex
css={{
marginRight: "$2",
fontSize: "$2",
color: "$hiContrast",
}}
Expand Down Expand Up @@ -214,18 +223,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: "flex-start",
gap: "$2",
width: "100%",
"@bp1": { width: "auto" },
}}
>
<Flex
css={{
marginRight: "$2",
fontSize: "$2",
color: "$hiContrast",
}}
Expand Down
61 changes: 45 additions & 16 deletions pages/orchestrators.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand Down
Loading