style: improve leaderboard heading on mobile

[ECWireless]

Description

Ensures mobile styles for the Leaderboard header match the Orchestrators page.

Type of Change

• feat: New feature
• fix: Bug fix
• docs: Documentation update
• style: Code style/formatting changes (no logic changes)
• refactor: Code refactoring (no behavior change)
• perf: Performance improvement
• test: Adding or updating tests
• build: Build system or dependency changes
• ci: CI/CD changes
• chore: Other changes

Related Issue(s)

Closes: # #548

Changes Made

• Made the headings match more overall (even on desktop)
• Primarily focused on ensuring the mobile styes matched the size and alignment of the Orchestrators heading

Testing

• Tested locally
• Added/updated tests
• All tests passing

How to test (optional unless test is not trivial)

• Check the Leaderboard page using the Vercel preview
• Use a mobile screen size

Impact / Risk

Risk level: Low

Impacted areas: UI

Screenshots / Recordings (if applicable)

Before:

After:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
explorer-arbitrum-one	Ready	Preview, Comment	Mar 18, 2026 9:29am

[Copilot]

Pull request overview

This PR adjusts the Leaderboard page header layout/typography to better match the Orchestrators page, with a focus on improved mobile alignment and sizing.

Changes:

• Updated the Leaderboard header container layout (alignment, spacing, responsive flex direction).
• Adjusted the Leaderboard <Heading> sizing and responsive alignment.
• Refined the filter controls layout for better mobile centering/wrapping behavior.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[rickstaa]

Thanks for tackling this! The heading size fix (size="3" → size="2"), comment cleanup, and switch to gap-based spacing are all great improvements.

One issue: the center alignment on mobile is inconsistent with the rest of the app.

Every other page (Orchestrators, Gateways, Transactions) uses left-aligned headings on all screen sizes. This PR introduces textAlign: "center" and alignItems: "center" on mobile, which creates a new inconsistency.

Specific styles to remove/adjust:

1. Outer Flex container — remove alignItems: "center"
2. Heading — remove textAlign: "center" and the @bp2: textAlign: "left" override (not needed if always left-aligned)
3. Filter controls Flex — remove alignItems: "center" and @bp1: justifyContent: "center"
4. Individual filter Flex wrappers (~lines 131, 224) — remove justifyContent: "center"

The target pattern from orchestrators.tsx for reference:

<Flex align="center" css={{ marginBottom: "$3", justifyContent: "space-between" }}>
  <Heading size="2" as="h1" css={{ fontWeight: 700 }}>
    ...
  </Heading>
</Flex>

The leaderboard still needs the column stacking on mobile (since it has filter controls the orchestrators page doesn't), but the content should be left-aligned within that column layout — matching every other page.

Everything else in this PR looks good — just needs the alignment fix. 👍

[rickstaa]

Why left-aligned with less padding?

A few reasons we prefer this:

1. Scannability — Left-aligned text creates a consistent visual anchor along the left edge. When users scroll through data-heavy pages (orchestrator stats, leaderboard scores), their eyes naturally track down that left edge. Center-aligned headings break this flow and force the eye to re-find the starting point on each section.

2. Alignment with content below — The table/list data beneath the heading is left-aligned. A left-aligned heading creates a clean vertical line from heading → filters → data. Centering the heading creates a visual disconnect with the content it introduces.

3. Compact = professional for dashboards — Less vertical padding keeps the controls tighter to the heading they belong to, reducing the scroll distance to reach actual data. On mobile especially, vertical space is precious — every extra $4 of margin pushes content below the fold.

4. Consistency — Orchestrators, Gateways, and Transactions all use left-aligned headers with minimal spacing. Matching that pattern means users experience the same layout rhythm across every page.

Suggested approach for the header section:

<Flex
  css={{
    flexDirection: "column",
    justifyContent: "space-between",
    marginBottom: "$3",
    "@bp2": {
      flexDirection: "row",
      alignItems: "center",
    },
  }}
>
  <Heading
    size="2"
    as="h1"
    css={{
      fontWeight: 700,
      marginBottom: "$3",
      "@bp2": {
        marginBottom: "0",
      },
    }}
  >

This keeps the column stacking on mobile (needed for the filters) while staying left-aligned and tight — matching the rest of the app.

[ECWireless]

One issue: the center alignment on mobile is inconsistent with the rest of the app.

@rickstaa agree with keeping it consistent with all other mobile pages on the app, but just noting that this is how the orchestrators page currently looks:

And this is how the Transactions heading looks on the overview page:

Wondering if we should also use this opportunity to make those headings left-aligned as well?

[rickstaa]

One issue: the center alignment on mobile is inconsistent with the rest of the app.

@rickstaa agree with keeping it consistent with all other mobile pages on the app, but just noting that this is how the orchestrators page currently looks:

And this is how the Transactions heading looks on the overview page: Wondering if we should also use this opportunity to make those headings left-aligned as well?

I think the difference is when you are on the homepage compared to the individual pages. If we can have consistent behavoir amongs both that would be great!

[ECWireless]

All headings on mobile are now left-aligned (even on the home page):

[rickstaa]

Look good now.