From c9960a725361cccfb4c7928b84848bc67a72ad00 Mon Sep 17 00:00:00 2001
From: Caroline di Vittorio
 <43390382+carolinedivittorio@users.noreply.github.com>
Date: Tue, 9 Jun 2026 11:14:18 -0700
Subject: [PATCH] fix: let usage table expand to fill available width (#1465)

* fix: let usage table expand to fill available width

The usage page was constrained to max-w-3xl while the leaderboard table
needs a 760px minimum for its 7 columns, so it always overflowed and
forced horizontal scrolling. Add an optional maxWidthClassName prop to
AppShell and widen the usage page to max-w-5xl so the table expands when
space allows, keeping overflow-x-auto as a narrow-screen fallback.

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>

* refactor: use cn-merged className override on AppShell

Replace the single-purpose maxWidthClassName prop with a general
className prop merged via cn (twMerge), matching the shadcn pattern. This
lets callers override any of the content-container classes ad hoc rather
than adding a new prop per override. Usage page passes className=max-w-5xl.

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>

---------

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>
Co-authored-by: Johannes du Plessis <johannes@langchain.dev>
---
 ui/src/components/AppShell.tsx | 13 +++++++++++--
 ui/src/routes/usage.tsx        |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/AppShell.tsx b/ui/src/components/AppShell.tsx
index a8fc0f4b..cda3189f 100644
--- a/ui/src/components/AppShell.tsx
+++ b/ui/src/components/AppShell.tsx
@@ -4,21 +4,30 @@ import type { ReactNode } from "react";
 
 import type { SessionUser } from "@/lib/api";
 import { AppSidebar } from "@/components/AppSidebar";
+import { cn } from "@/lib/utils";
 
 interface AppShellProps {
   user: SessionUser;
   title: string;
   description?: string;
   backTo?: { to: string; label: string };
+  className?: string;
   children: ReactNode;
 }
 
-export function AppShell({ user, title, description, backTo, children }: AppShellProps) {
+export function AppShell({
+  user,
+  title,
+  description,
+  backTo,
+  className,
+  children,
+}: AppShellProps) {
   return (
     <div className="flex h-svh overflow-hidden bg-background text-foreground">
       <AppSidebar user={user} />
       <main className="flex-1 overflow-y-auto">
-        <div className="mx-auto max-w-3xl px-4 pt-14 pb-6 sm:px-8 sm:py-10">
+        <div className={cn("mx-auto max-w-3xl px-4 pt-14 pb-6 sm:px-8 sm:py-10", className)}>
           {backTo && (
             <Link
               to={backTo.to}
diff --git a/ui/src/routes/usage.tsx b/ui/src/routes/usage.tsx
index eb5333eb..5bc11be0 100644
--- a/ui/src/routes/usage.tsx
+++ b/ui/src/routes/usage.tsx
@@ -60,7 +60,7 @@ function UsagePage() {
   if (!session.data) return <Navigate to="/login" />
 
   return (
-    <AppShell user={session.data} title="Usage">
+    <AppShell user={session.data} title="Usage" className="max-w-5xl">
       <SettingsSection
         title="Agent leaderboard"
         description="Ranked by agent lines of code, then PRs opened and agent runs."