compact roleplay persona grid

Author: Togethr1

src/app/roleplay/page.tsx

@@ -41,15 +41,15 @@ export default async function RoleplayPage() {
                     </Link>
                 </div>
 
-                <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+                <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_300px] xl:grid-cols-[minmax(0,1fr)_320px]">
                     <section className="min-w-0">
                         <div className="mb-3 flex items-baseline gap-2">
                             <h2 className="text-sm font-semibold">Practice prospects</h2>
                             <span className="text-xs text-muted-foreground">
                                 {personas.length} {personas.length === 1 ? 'persona' : 'personas'}
                             </span>
                         </div>
-                        <div className="grid gap-4">
+                        <div className="grid gap-4 sm:grid-cols-2">
                             {personas.map((persona) => (
                                 <PersonaCard
                                     key={persona.id}
@@ -69,7 +69,7 @@ export default async function RoleplayPage() {
                         </div>
                     </section>
 
-                    <aside className="flex h-[320px] flex-col overflow-hidden rounded-xl border border-border bg-card lg:mt-8">
+                    <aside className="flex h-[240px] flex-col overflow-hidden rounded-xl border border-border bg-card lg:mt-8">
                         <div className="flex items-center gap-2 border-b border-border px-4 py-3.5">
                             <History className="h-4 w-4 text-primary" />
                             <h2 className="text-sm font-semibold">Recent practice</h2>

src/components/personas/persona-card.tsx

@@ -26,7 +26,7 @@ export function PersonaCard({
     }
 
     return (
-        <article className="relative flex h-[320px] w-full min-w-0 flex-col overflow-hidden rounded-xl border border-border bg-card p-4">
+        <article className="relative flex h-[240px] w-full min-w-0 flex-col overflow-hidden rounded-xl border border-border bg-card p-4">
             <div className="min-h-0 flex-1 overflow-hidden">
                 <div className="flex items-start gap-3">
                     <div className="min-w-0 flex-1">
@@ -66,7 +66,7 @@ export function PersonaCard({
                         </div>
                     )}
                 </div>
-                <div className="mt-4 min-w-0 space-y-2.5 overflow-hidden text-xs leading-5 text-muted-foreground">
+                <div className="mt-3 min-w-0 space-y-1.5 overflow-hidden text-xs leading-5 text-muted-foreground">
                     <p className="line-clamp-1 break-words">
                         <span className="font-medium text-foreground/80">Likely objections: </span>
                         {persona.personality_config.keyObjections.join(', ')}