scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-07 08:26:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Better responsive layout (#102)

Browse source
This commit is contained in:
Matt Rubens 2025-06-16 16:11:13 -04:00 • committed by GitHub
parent 849dccb3e9
commit 2470f1f822
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/(authenticated)/layout.tsx
View file

@ -39,7 +39,9 @@ export default async function AuthenticatedLayout({
userRole={orgRole === 'org:admin' ? 'admin' : 'member'}
/>
<Section divider={false} className="min-h-[calc(100vh-72px-72px-2px)]">
<div className="flex flex-col gap-8 py-8">{children}</div>
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8 py-4 sm:py-6 lg:py-8">
{children}
</div>
</Section>
</>
);

2
src/app/(authenticated)/usage/Usage.tsx
View file

@ -42,7 +42,7 @@ export const Usage = ({ userRole = 'admin', currentUserId }: UsageProps) => {
return (
<>
<div className="flex flex-col gap-4 sm:gap-6">
<div className="flex flex-col gap-3 sm:gap-4 lg:gap-6">
<UsageCard userRole={userRole} currentUserId={currentUserId} />
{!isMember && (
<div className="flex flex-wrap gap-2">

2
src/components/layout/Section.tsx
View file

@ -12,7 +12,7 @@ export const Section = ({
<div className={cn({ 'border-b border-dashed': divider })}>
<div
className={cn(
'max-w-screen-lg border-l border-r border-dashed mx-auto px-8',
'max-w-screen-lg border-l border-r border-dashed mx-auto px-4 sm:px-6 lg:px-8',
className,
)}
{...rest}

6
src/components/usage/UsageCard.tsx
View file

@ -91,8 +91,8 @@ export const UsageCard = ({
</CardHeader>
<CardContent>
<div className="flex flex-col gap-3">
<div className="flex flex-row flex-wrap gap-4 justify-between items-center">
<div className="flex flex-row gap-3 items-center">
<div className="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-4 justify-between items-start sm:items-center">
<div className="flex flex-row gap-2 sm:gap-3 items-center">
{/* Time period toggles */}
<div className="flex flex-row gap-1">
{allTimePeriods.map((periodConfig) => (
@ -134,7 +134,7 @@ export const UsageCard = ({
</div>
{/* Compact inline metrics */}
<div className="flex flex-wrap gap-4 text-xs">
<div className="flex flex-wrap gap-2 sm:gap-4 text-xs">
<div className="flex items-center gap-1">
<span className="text-muted-foreground">Developers:</span>
<span className="font-medium">