style: make layout more compact to fit in viewport

Reduce padding and spacing across components to fit content in a
single viewport without scrolling. Update GlobalNav, AnalysisTabs,
VideoHeader, EvidenceStrip, SummaryCard, and OverviewContent.

Author: nolancacheux

src/app/analysis/[id]/layout.tsx

@@ -28,20 +28,20 @@ function AnalysisLayoutContent({ children }: { children: React.ReactNode }) {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-[#FAF8F5]">
+      <div className="h-screen flex flex-col overflow-hidden bg-[#FAF8F5]">
         <GlobalNav />
-        <div className="border-b border-[#E8E4DC] bg-white">
-          <div className="px-6 py-4">
-            <Skeleton className="h-16 w-full" />
+        <div className="border-b border-[#E8E4DC] bg-white flex-shrink-0">
+          <div className="px-4 py-2">
+            <Skeleton className="h-10 w-full" />
           </div>
         </div>
-        <div className="border-b border-[#E8E4DC] bg-white">
-          <div className="px-6">
-            <Skeleton className="h-12 w-96" />
+        <div className="border-b border-[#E8E4DC] bg-white flex-shrink-0">
+          <div className="px-4">
+            <Skeleton className="h-10 w-80" />
           </div>
         </div>
-        <main className="p-6">
-          <Skeleton className="h-[600px] w-full" />
+        <main className="flex-1 overflow-auto p-4">
+          <Skeleton className="h-full w-full" />
         </main>
       </div>
     );
@@ -52,12 +52,12 @@ function AnalysisLayoutContent({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <div className="min-h-screen bg-[#FAF8F5]">
+    <div className="h-screen flex flex-col overflow-hidden bg-[#FAF8F5]">
       <GlobalNav />
 
       {/* Video Header */}
-      <div className="border-b border-[#E8E4DC] bg-white">
-        <div className="px-6 py-4">
+      <div className="border-b border-[#E8E4DC] bg-white flex-shrink-0">
+        <div className="px-4 py-2">
           <VideoHeader
             video={analysis.video}
             totalComments={analysis.total_comments}
@@ -70,7 +70,7 @@ function AnalysisLayoutContent({ children }: { children: React.ReactNode }) {
       <AnalysisTabs analysisId={analysisId} />
 
       {/* Page Content */}
-      <main className="p-6">{children}</main>
+      <main className="flex-1 overflow-auto p-4">{children}</main>
     </div>
   );
 }

src/components/blocks/evidence-strip.tsx

@@ -30,31 +30,31 @@ export function EvidenceStrip({ comments, className }: EvidenceStripProps) {
     }
   };
 
-  const truncateText = (text: string, maxLength: number = 80) => {
+  const truncateText = (text: string, maxLength: number = 60) => {
     if (text.length <= maxLength) return text;
     return text.slice(0, maxLength).trim() + "...";
   };
 
   return (
-    <div className={cn("space-y-3", className)}>
-      <div className="flex items-center gap-2 text-xs font-semibold text-[#6B7280] uppercase tracking-wider">
-        <Quote className="h-3.5 w-3.5" />
+    <div className={cn("space-y-2", className)}>
+      <div className="flex items-center gap-1.5 text-[10px] font-semibold text-[#6B7280] uppercase tracking-wider">
+        <Quote className="h-3 w-3" />
         <span>Top Evidence</span>
       </div>
-      <div className="space-y-2">
+      <div className="space-y-1.5">
         {topComments.map((comment) => (
           <div
             key={comment.id}
             className={cn(
-              "p-3 rounded-lg border-l-4 transition-colors hover:brightness-95",
+              "p-2 rounded-md border-l-3 transition-colors hover:brightness-95",
               getSentimentStyle(comment.sentiment)
             )}
           >
-            <p className="text-sm text-[#1E3A5F] leading-relaxed">
+            <p className="text-[11px] text-[#1E3A5F] leading-snug">
               "{truncateText(comment.text)}"
             </p>
-            <div className="mt-2 flex items-center gap-2 text-xs text-[#6B7280]">
-              <ThumbsUp className="h-3 w-3" />
+            <div className="mt-1 flex items-center gap-1.5 text-[10px] text-[#6B7280]">
+              <ThumbsUp className="h-2.5 w-2.5" />
               <span className="font-medium">{comment.like_count.toLocaleString()}</span>
             </div>
           </div>

src/components/blocks/summary-card.tsx

@@ -69,70 +69,68 @@ export function SummaryCard({
   return (
     <div
       className={cn(
-        "rounded-xl border border-[#E8E4DC] bg-white overflow-hidden card-hover",
+        "rounded-lg border border-[#E8E4DC] bg-white overflow-hidden card-hover",
         className
       )}
     >
       {/* Header */}
-      <div className={cn("px-4 py-3 flex items-center gap-3", config.headerBg)}>
-        <Icon className="h-5 w-5 text-white" />
-        <h3 className="font-semibold text-white">{config.label}</h3>
-        <span className="ml-auto text-sm text-white/80 font-mono">
-          {commentCount} comments
+      <div className={cn("px-3 py-2 flex items-center gap-2", config.headerBg)}>
+        <Icon className="h-4 w-4 text-white" />
+        <h3 className="text-sm font-semibold text-white">{config.label}</h3>
+        <span className="ml-auto text-xs text-white/80 font-mono">
+          {commentCount}
         </span>
       </div>
 
       {/* Content */}
-      <div className="p-4 space-y-4">
+      <div className="p-3 space-y-2.5">
         {/* Top Themes */}
         <div>
-          <h4 className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider mb-2">
+          <h4 className="text-[10px] font-semibold text-[#6B7280] uppercase tracking-wider mb-1">
             Top Themes
           </h4>
           {sentimentTopics.length > 0 ? (
-            <ul className="space-y-1">
-              {sentimentTopics.map((topic) => (
+            <ul className="space-y-0.5">
+              {sentimentTopics.slice(0, 3).map((topic) => (
                 <li
                   key={topic.id}
-                  className="text-sm text-[#1E3A5F] flex items-center gap-2"
+                  className="text-xs text-[#1E3A5F] flex items-center gap-1.5"
                 >
-                  <span className="w-1.5 h-1.5 rounded-full bg-current opacity-40" />
+                  <span className="w-1 h-1 rounded-full bg-current opacity-40" />
                   <span className="truncate">{topic.phrase || topic.name}</span>
-                  <span className="text-xs text-[#6B7280] ml-auto">
+                  <span className="text-[10px] text-[#6B7280] ml-auto">
                     {topic.mention_count}
                   </span>
                 </li>
               ))}
             </ul>
           ) : (
-            <p className="text-sm text-[#6B7280] italic">No topics detected</p>
+            <p className="text-xs text-[#6B7280] italic">No topics</p>
           )}
         </div>
 
         {/* Evidence */}
         <div>
-          <h4 className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider mb-2">
+          <h4 className="text-[10px] font-semibold text-[#6B7280] uppercase tracking-wider mb-0.5">
             Evidence
           </h4>
-          <p className="text-sm text-[#1E3A5F]">
-            {commentCount} comments, {totalLikes.toLocaleString()} total likes
+          <p className="text-xs text-[#1E3A5F]">
+            {commentCount} comments, {totalLikes.toLocaleString()} likes
           </p>
         </div>
 
         {/* Summary / Action */}
         <div>
-          <h4 className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider mb-2">
+          <h4 className="text-[10px] font-semibold text-[#6B7280] uppercase tracking-wider mb-0.5">
             Summary
           </h4>
           {hasEnoughData && summary?.summary ? (
-            <p className="text-sm text-[#1E3A5F] leading-relaxed">
+            <p className="text-xs text-[#1E3A5F] leading-relaxed line-clamp-3">
               {summary.summary}
             </p>
           ) : (
-            <p className="text-sm text-[#6B7280] italic">
-              {hasEnoughData
-                ? "AI summary unavailable"
-                : "Not enough data for a reliable summary (need 5+ comments)"}
+            <p className="text-xs text-[#6B7280] italic">
+              {hasEnoughData ? "AI summary unavailable" : "Need 5+ comments"}
             </p>
           )}
         </div>

src/components/layout/video-header.tsx

@@ -54,7 +54,7 @@ export function VideoHeader({
   };
 
   return (
-    <div className="flex items-center gap-4 rounded-lg border bg-white p-3">
+    <div className="flex items-center gap-3 rounded-md border bg-white p-2">
       {/* Thumbnail */}
       {video.thumbnail_url ? (
         <a
@@ -66,46 +66,46 @@ export function VideoHeader({
           <img
             src={video.thumbnail_url}
             alt={video.title}
-            className="h-14 w-24 rounded object-cover"
+            className="h-10 w-18 rounded object-cover"
           />
           <div className="absolute inset-0 rounded bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
-            <ExternalLink className="h-4 w-4 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
+            <ExternalLink className="h-3 w-3 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
           </div>
         </a>
       ) : (
-        <div className="h-14 w-24 rounded bg-slate-100 flex-shrink-0" />
+        <div className="h-10 w-18 rounded bg-slate-100 flex-shrink-0" />
       )}
 
       {/* Video Info */}
       <div className="flex-1 min-w-0">
-        <h1 className="font-semibold text-sm truncate leading-tight">
+        <h1 className="font-semibold text-xs truncate leading-tight">
           {video.title}
         </h1>
-        <div className="flex items-center gap-3 mt-1">
+        <div className="flex items-center gap-2 mt-0.5">
           {video.channel_title && (
-            <div className="flex items-center gap-1 text-xs text-muted-foreground">
-              <User className="h-3 w-3" />
-              <span className="truncate max-w-[150px]">{video.channel_title}</span>
+            <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+              <User className="h-2.5 w-2.5" />
+              <span className="truncate max-w-[120px]">{video.channel_title}</span>
             </div>
           )}
           {video.published_at && (
-            <div className="flex items-center gap-1 text-xs text-muted-foreground">
-              <Calendar className="h-3 w-3" />
+            <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+              <Calendar className="h-2.5 w-2.5" />
               <span>{new Date(video.published_at).toLocaleDateString()}</span>
             </div>
           )}
         </div>
       </div>
 
       {/* Stats Badges */}
-      <div className="flex items-center gap-2 flex-shrink-0">
-        <Badge variant="secondary" className="gap-1.5 text-xs font-medium">
-          <MessageSquare className="h-3 w-3" />
-          {totalComments.toLocaleString()} comments
+      <div className="flex items-center gap-1.5 flex-shrink-0">
+        <Badge variant="secondary" className="gap-1 text-[10px] font-medium px-2 py-0.5">
+          <MessageSquare className="h-2.5 w-2.5" />
+          {totalComments.toLocaleString()}
         </Badge>
         {analyzedAt && (
-          <Badge variant="outline" className="text-xs font-normal text-muted-foreground">
-            Analyzed {formatDate(analyzedAt)}
+          <Badge variant="outline" className="text-[10px] font-normal text-muted-foreground px-2 py-0.5">
+            {formatDate(analyzedAt)}
           </Badge>
         )}
       </div>

src/components/navigation/analysis-tabs.tsx

@@ -46,7 +46,7 @@ export function AnalysisTabs({ analysisId, className }: AnalysisTabsProps) {
   };
 
   return (
-    <div className={cn("border-b border-[#E8E4DC] bg-white", className)}>
+    <div className={cn("border-b border-[#E8E4DC] bg-white flex-shrink-0", className)}>
       <nav className="flex gap-0 px-4" aria-label="Analysis tabs">
         {tabs.map((tab) => {
           const Icon = tab.icon;
@@ -57,7 +57,7 @@ export function AnalysisTabs({ analysisId, className }: AnalysisTabsProps) {
               key={tab.name}
               href={tab.href(analysisId)}
               className={cn(
-                "flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors",
+                "flex items-center gap-2 px-3 py-2 text-sm font-medium border-b-2 transition-colors",
                 active
                   ? "border-[#D4714E] text-[#1E3A5F]"
                   : "border-transparent text-[#6B7280] hover:text-[#1E3A5F] hover:border-[#E8E4DC]"

src/components/navigation/global-nav.tsx

@@ -16,7 +16,7 @@ export function GlobalNav({ className }: GlobalNavProps) {
   return (
     <nav
       className={cn(
-        "h-14 border-b border-[#E8E4DC] bg-white px-4 flex items-center justify-between",
+        "h-12 border-b border-[#E8E4DC] bg-white px-4 flex items-center justify-between flex-shrink-0",
         className
       )}
     >