adam/open-swe
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/open-swe.git synced 2026-09-30 09:13:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: let usage table expand to fill available width (#1465)

Browse source 
* 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>
This commit is contained in:
Caroline di Vittorio 2026-06-09 11:14:18 -07:00 • committed by GitHub
parent 798cc6edf1
commit c9960a7253
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ui/src/components/AppShell.tsx
View file

@ -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}

2
ui/src/routes/usage.tsx
View file

@ -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."