From 2470f1f822d1516f797e255fe9ae120a97b0bfb8 Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Mon, 16 Jun 2025 16:11:13 -0400
Subject: [PATCH] Better responsive layout (#102)

---
 src/app/(authenticated)/layout.tsx      | 4 +++-
 src/app/(authenticated)/usage/Usage.tsx | 2 +-
 src/components/layout/Section.tsx       | 2 +-
 src/components/usage/UsageCard.tsx      | 6 +++---
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/app/(authenticated)/layout.tsx b/src/app/(authenticated)/layout.tsx
index ac9062ce43..26a074e1c5 100644
--- a/src/app/(authenticated)/layout.tsx
+++ b/src/app/(authenticated)/layout.tsx
@@ -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>
     </>
   );
diff --git a/src/app/(authenticated)/usage/Usage.tsx b/src/app/(authenticated)/usage/Usage.tsx
index 16d61aea5e..e75506912c 100644
--- a/src/app/(authenticated)/usage/Usage.tsx
+++ b/src/app/(authenticated)/usage/Usage.tsx
@@ -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">
diff --git a/src/components/layout/Section.tsx b/src/components/layout/Section.tsx
index d1ee13cb6b..3007ef1687 100644
--- a/src/components/layout/Section.tsx
+++ b/src/components/layout/Section.tsx
@@ -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}
diff --git a/src/components/usage/UsageCard.tsx b/src/components/usage/UsageCard.tsx
index d422e014c9..d0c13b1556 100644
--- a/src/components/usage/UsageCard.tsx
+++ b/src/components/usage/UsageCard.tsx
@@ -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">