From 1a5230d26937d41ba41466f56823be3946ed445f Mon Sep 17 00:00:00 2001
From: Levy Tate <78818969+iLevyTate@users.noreply.github.com>
Date: Fri, 6 Nov 2026 19:57:59 -0500
Subject: [PATCH 1/2] fix(dashboard): fit the whole board in the window on
 short screens

The dashboard is a single-screen overview but used fixed desktop spacing
(24px card padding, 32px hero padding, 16px row gaps) at every window
height, so on a ~770px-tall window it ran ~65px past the bottom and the
hero scrolled off the top.

It now tightens its vertical rhythm with the window height instead of
scrolling: spacing comes from --dash-* vars on .dashboard-view, stepped
down at max-height 900px and 760px. At <=900px the knowledge stats put
their icon beside the value, the h1, stage numbers and smart-folder
chips shrink a step; at <=760px the hero summary line (which repeats the
pipeline and smart-folder cards) is hidden. The pipeline connector rail
now tracks the variable inner padding. Scrolling remains the fallback
for windows too short for even the tight tier.

Measured at 1292px wide with live knowledge stats: fits with no scroll
at 1000, 900, 800, 770, 720 and 680px tall (previously overflowed at
<=900px).
---
 .../components/dashboard/DashboardView.jsx    | 38 ++++-----
 .../dashboard/KnowledgeStatsCard.jsx          | 19 +++--
 src/renderer/styles.css                       | 77 +++++++++++++++++++
 3 files changed, 108 insertions(+), 26 deletions(-)

diff --git a/src/renderer/components/dashboard/DashboardView.jsx b/src/renderer/components/dashboard/DashboardView.jsx
index b918f56..5495e3a 100644
--- a/src/renderer/components/dashboard/DashboardView.jsx
+++ b/src/renderer/components/dashboard/DashboardView.jsx
@@ -164,7 +164,7 @@ function HeroBand({ status, greeting, summary, onImport, onAdd }) {
               {greeting}
             </span>
           </Heading>
-          <Text variant="small" className="mt-1">
+          <Text variant="small" className="dashboard-hero-summary mt-1">
             {summary}
           </Text>
         </div>
@@ -262,7 +262,7 @@ function PipelineStage({ icon: Icon, label, value, tone, isEntryHint, onClick })
         <Icon className="h-5 w-5" aria-hidden="true" />
       </span>
       <div
-        className={`mt-2 font-mono text-3xl font-semibold leading-none tracking-tight tabular-nums ${valueClass}`}
+        className={`dashboard-stage-value mt-2 font-mono text-3xl font-semibold leading-none tracking-tight tabular-nums ${valueClass}`}
       >
         <AnimatedCount value={value} />
       </div>
@@ -322,10 +322,10 @@ function PipelineCard({
           spans icon-center to icon-center (each of three equal columns centers
           its icon at 1/6, 1/2, 5/6 of the width); the success-tinted fill grows
           toward the Organized node as work completes. */}
-      <div className="relative mt-4 rounded-xl border border-border-soft/50 bg-system-gray-100/25 p-4">
+      <div className="relative mt-[var(--dash-section-gap)] rounded-xl border border-border-soft/50 bg-system-gray-100/25 p-[var(--dash-inner-pad)]">
         <div
           aria-hidden="true"
-          className="pointer-events-none absolute left-[16.66%] right-[16.66%] top-9 h-0.5 -translate-y-1/2 overflow-hidden rounded-full bg-system-gray-200/80"
+          className="pointer-events-none absolute left-[16.66%] right-[16.66%] top-[calc(var(--dash-inner-pad)+1.25rem)] h-0.5 -translate-y-1/2 overflow-hidden rounded-full bg-system-gray-200/80"
         >
           <motion.div
             className="relative h-full overflow-hidden rounded-full bg-gradient-to-r from-stratosort-warning/70 via-stratosort-blue/80 to-stratosort-success"
@@ -363,7 +363,7 @@ function PipelineCard({
           />
         </div>
       </div>
-      <div className="mt-4 flex items-center justify-between gap-cozy lg:mt-auto lg:pt-4">
+      <div className="mt-[var(--dash-section-gap)] flex items-center justify-between gap-cozy lg:mt-auto lg:pt-[var(--dash-section-gap)]">
         <Text variant="tiny">{`${inFlight} of ${stats.total} files in flight`}</Text>
         {stats.failed > 0 ? (
           <Button variant="ghost" size="sm" onClick={onReviewFailed}>
@@ -412,11 +412,11 @@ function SmartFoldersCard({ folders, onManage, className }) {
           Quick-actions card via lg:items-stretch), so a handful of folders read
           as substantial cards instead of short pills floated at the top.
           min-h keeps a floor for the many-folders case. */}
-      <div className="mt-4 grid flex-1 auto-rows-fr grid-cols-2 gap-compact lg:grid-cols-3">
+      <div className="mt-[var(--dash-section-gap)] grid flex-1 auto-rows-fr grid-cols-2 gap-compact lg:grid-cols-3">
         {visible.map((folder) => (
           <div
             key={folder.id || folder.name}
-            className="flex min-h-[2.75rem] items-center gap-compact rounded-xl border border-border-soft/50 bg-system-gray-100/40 px-3 py-2 text-sm font-medium"
+            className="dashboard-chip flex min-h-[2.75rem] items-center gap-compact rounded-xl border border-border-soft/50 bg-system-gray-100/40 px-3 py-2 text-sm font-medium"
             title={folder.name}
           >
             <FolderTree className="h-4 w-4 shrink-0 text-stratosort-warning" aria-hidden="true" />
@@ -424,7 +424,7 @@ function SmartFoldersCard({ folders, onManage, className }) {
           </div>
         ))}
         {overflow > 0 ? (
-          <div className="flex min-h-[2.75rem] items-center justify-center rounded-xl border border-dashed border-border-soft/50 px-3 py-2 text-sm text-system-gray-600">
+          <div className="dashboard-chip flex min-h-[2.75rem] items-center justify-center rounded-xl border border-dashed border-border-soft/50 px-3 py-2 text-sm text-system-gray-600">
             {`+${overflow} more`}
           </div>
         ) : null}
@@ -446,7 +446,7 @@ function QuickActionTile({ icon: Icon, title, description, onClick, tone }) {
       type="button"
       variant="interactive"
       onClick={onClick}
-      className="group/tile interactive-lift text-left w-full h-full focus-visible:ring-2 focus-visible:ring-stratosort-blue focus-visible:ring-offset-2 focus-visible:outline-none"
+      className="dashboard-tile group/tile interactive-lift text-left w-full h-full focus-visible:ring-2 focus-visible:ring-stratosort-blue focus-visible:ring-offset-2 focus-visible:outline-none"
     >
       <div className="flex items-start gap-cozy">
         <span
@@ -510,7 +510,7 @@ function ActivityCard({
             icon={FolderTree}
             title="No activity yet"
             description="Organized files will show up here as you confirm suggestions."
-            className="mt-4 lg:mt-0"
+            className="mt-[var(--dash-section-gap)] lg:mt-0"
             action={
               <Button variant="subtle" size="sm" onClick={onAddFiles}>
                 Add files to start
@@ -543,7 +543,7 @@ function ActivityCard({
               );
             })}
           </Stack>
-          <div className="mt-4 lg:mt-auto lg:pt-4">
+          <div className="mt-[var(--dash-section-gap)] lg:mt-auto lg:pt-[var(--dash-section-gap)]">
             <Button variant="ghost" size="sm" onClick={onViewQueue}>
               {queue.some((file) => file.status === 'ready')
                 ? 'Review ready files'
@@ -553,7 +553,7 @@ function ActivityCard({
         </>
       ) : (
         <>
-          <Stack gap="compact" className="mt-4">
+          <Stack gap="compact" className="mt-[var(--dash-section-gap)]">
             {recent.map((file, idx) => (
               <div
                 key={`${file.originalPath || file.newName || 'file'}-${idx}`}
@@ -571,7 +571,7 @@ function ActivityCard({
               </div>
             ))}
           </Stack>
-          <div className="mt-4 lg:mt-auto lg:pt-4">
+          <div className="mt-[var(--dash-section-gap)] lg:mt-auto lg:pt-[var(--dash-section-gap)]">
             <Button variant="ghost" size="sm" onClick={onViewAll}>
               View all results
             </Button>
@@ -746,7 +746,7 @@ export default function DashboardView() {
   return (
     <div
       {...dragProps}
-      className={`relative flex w-full flex-col rounded-2xl transition-shadow ${
+      className={`dashboard-view relative flex w-full flex-col rounded-2xl transition-shadow ${
         isDragging ? 'ring-2 ring-stratosort-blue/40 ring-offset-2' : ''
       }`}
     >
@@ -775,7 +775,7 @@ export default function DashboardView() {
         variants={STAGGER_VARIANTS}
         initial="hidden"
         animate="show"
-        className="relative z-10 flex flex-col gap-default"
+        className="relative z-10 flex flex-col gap-[var(--dash-gap)]"
       >
         <motion.div variants={blockVariants}>
           <HeroBand
@@ -787,14 +787,14 @@ export default function DashboardView() {
           />
         </motion.div>
 
-        <motion.div variants={blockVariants} className="flex flex-col gap-default">
+        <motion.div variants={blockVariants} className="flex flex-col gap-[var(--dash-gap)]">
           {isAnalyzing && progress && <AnalysisProgress progress={progress} />}
 
           {/* Live-status zone — the two surfaces that answer "what's happening?".
               The pipeline holds the aggregate counts; the activity rail holds the
               individual items behind those counts, so they are paired and share a
               height via items-stretch rather than living in separate columns. */}
-          <div className="grid grid-cols-1 gap-default lg:grid-cols-[2fr_1fr] lg:items-stretch">
+          <div className="grid grid-cols-1 gap-[var(--dash-gap)] lg:grid-cols-[2fr_1fr] lg:items-stretch">
             <PipelineCard
               stats={stats}
               organizedCount={organizedCount}
@@ -827,10 +827,10 @@ export default function DashboardView() {
           {/* Get-things-done zone — shortcuts to the working surfaces paired with
               the smart-folder destinations they feed. Same 2fr/1fr split as the
               status row above so the column gutter lines up down the page. */}
-          <div className="grid grid-cols-1 gap-default lg:grid-cols-[2fr_1fr] lg:items-stretch">
+          <div className="grid grid-cols-1 gap-[var(--dash-gap)] lg:grid-cols-[2fr_1fr] lg:items-stretch">
             <Card variant="default" className="h-full lg:flex lg:flex-col">
               <SectionLabel>Quick actions</SectionLabel>
-              <div className="mt-4 grid grid-cols-1 gap-cozy sm:grid-cols-3 sm:items-stretch lg:flex-1">
+              <div className="mt-[var(--dash-section-gap)] grid grid-cols-1 gap-cozy sm:grid-cols-3 sm:items-stretch lg:flex-1">
                 <QuickActionTile
                   icon={FolderPlus}
                   title="Add & analyze files"
diff --git a/src/renderer/components/dashboard/KnowledgeStatsCard.jsx b/src/renderer/components/dashboard/KnowledgeStatsCard.jsx
index e8969c7..04e2e7a 100644
--- a/src/renderer/components/dashboard/KnowledgeStatsCard.jsx
+++ b/src/renderer/components/dashboard/KnowledgeStatsCard.jsx
@@ -59,17 +59,22 @@ function isoToYear(iso) {
  * @param {{ icon: React.ElementType, value: string, label: string }} props
  */
 function StatTile({ icon: Icon, value, label }) {
+  // dashboard-stat / dashboard-stat-text: on short windows the dashboard
+  // density rules (styles.css, .dashboard-view) lay the chip beside the
+  // value instead of above it, saving roughly 50px of height.
   return (
-    <div className="flex flex-col items-center text-center">
-      <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-stratosort-blue/12 text-stratosort-blue">
+    <div className="dashboard-stat flex flex-col items-center text-center">
+      <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-stratosort-blue/12 text-stratosort-blue">
         <Icon className="h-5 w-5" aria-hidden="true" />
       </span>
-      <div className="mt-2 font-mono text-2xl font-semibold leading-none tracking-tight tabular-nums text-stratosort-blue">
-        {value}
+      <div className="dashboard-stat-text mt-2">
+        <div className="font-mono text-2xl font-semibold leading-none tracking-tight tabular-nums text-stratosort-blue">
+          {value}
+        </div>
+        <Text variant="tiny" className="mt-1">
+          {label}
+        </Text>
       </div>
-      <Text variant="tiny" className="mt-1">
-        {label}
-      </Text>
     </div>
   );
 }
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index decf52c..8867788 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -2763,4 +2763,81 @@
   .chat-input {
     background-color: var(--surface-primary);
   }
+
+  /*
+   * Dashboard vertical density. The dashboard is a single-screen overview, so
+   * on short windows it tightens its vertical rhythm instead of scrolling.
+   * DashboardView reads these vars for its row gaps and internal spacing; the
+   * card/hero/tile padding overrides live here because Card bakes in
+   * `p-4 sm:p-6` (hero `p-6 sm:p-8`) and a className can't reliably out-rank a
+   * responsive utility. Two-class selectors win on specificity inside this
+   * layer, no !important needed. Below `sm` the Card defaults already apply.
+   */
+  .dashboard-view {
+    --dash-gap: 1rem;
+    --dash-section-gap: 1rem;
+    --dash-inner-pad: 1rem;
+    --dash-card-pad: 1.5rem;
+    --dash-hero-pad: 2rem;
+    --dash-tile-pad: 1.5rem;
+  }
+
+  @media (max-height: 900px) {
+    .dashboard-view {
+      --dash-gap: 0.75rem;
+      --dash-section-gap: 0.75rem;
+      --dash-inner-pad: 0.75rem;
+      --dash-card-pad: 1rem;
+      --dash-hero-pad: 1.25rem;
+      --dash-tile-pad: 1rem;
+    }
+    /* Knowledge stats: chip beside the value instead of stacked above it. */
+    .dashboard-view .dashboard-stat {
+      flex-direction: row;
+      justify-content: center;
+      gap: 0.75rem;
+      text-align: left;
+    }
+    .dashboard-view .dashboard-stat-text {
+      margin-top: 0;
+    }
+    .dashboard-view h1 {
+      font-size: 1.875rem;
+      line-height: 2.25rem;
+    }
+    .dashboard-view .dashboard-stage-value {
+      font-size: 1.5rem;
+    }
+    .dashboard-view .dashboard-chip {
+      min-height: 2.25rem;
+    }
+  }
+
+  @media (max-height: 760px) {
+    .dashboard-view {
+      --dash-gap: 0.5rem;
+      --dash-section-gap: 0.5rem;
+      --dash-inner-pad: 0.5rem;
+      --dash-card-pad: 0.75rem;
+      --dash-hero-pad: 1rem;
+      --dash-tile-pad: 0.75rem;
+    }
+    /* The hero summary repeats what the pipeline and smart-folder cards
+       already show, so it is the first thing to give up on very short windows. */
+    .dashboard-view .dashboard-hero-summary {
+      display: none;
+    }
+  }
+
+  @media (min-width: 640px) {
+    .dashboard-view .surface-card {
+      padding: var(--dash-card-pad);
+    }
+    .dashboard-view .glass-panel {
+      padding: var(--dash-hero-pad);
+    }
+    .dashboard-view .dashboard-tile {
+      padding: var(--dash-tile-pad);
+    }
+  }
 }

From b8ce6eac0660ac9b8351fd49c303ef242dd03ef2 Mon Sep 17 00:00:00 2001
From: Levy Tate <78818969+iLevyTate@users.noreply.github.com>
Date: Fri, 6 Nov 2026 20:29:14 -0500
Subject: [PATCH 2/2] fix(dashboard): fill the window height instead of leaving
 space below
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The first pass only shrank the board on short windows; on a window taller
than its content the cards kept their natural height and the spare space
pooled at the bottom, with the knowledge stats hugging the top of their card.

Now, at the lg layout, the board is a column that fills the content area:
the hero keeps its natural height and the two card rows plus the knowledge
card each grow from their natural height by an equal share of the spare
space (`grow`, not `flex-1`, whose zero basis gave the smallest row all of
it). Inside, cards centre their content: pipeline stages (the connector rail
now rides on the stage row rather than the box padding), quick-action tiles
and the knowledge stats. The 2:1 columns use minmax(0, …) so a long file name
in Recent activity truncates instead of widening its column and knocking the
two rows' gutters out of line. The tight density tier now starts at 800px.

Measured at 1463px wide: no overflow and no bottom gap at 728-1200px tall
(and 1280x720, 1100x800); 700px needs 8px of scroll.
---
 .../components/dashboard/DashboardView.jsx    | 95 ++++++++++---------
 .../dashboard/KnowledgeStatsCard.jsx          | 22 +++--
 src/renderer/styles.css                       |  2 +-
 3 files changed, 66 insertions(+), 53 deletions(-)

diff --git a/src/renderer/components/dashboard/DashboardView.jsx b/src/renderer/components/dashboard/DashboardView.jsx
index 5495e3a..66b75fb 100644
--- a/src/renderer/components/dashboard/DashboardView.jsx
+++ b/src/renderer/components/dashboard/DashboardView.jsx
@@ -322,45 +322,47 @@ function PipelineCard({
           spans icon-center to icon-center (each of three equal columns centers
           its icon at 1/6, 1/2, 5/6 of the width); the success-tinted fill grows
           toward the Organized node as work completes. */}
-      <div className="relative mt-[var(--dash-section-gap)] rounded-xl border border-border-soft/50 bg-system-gray-100/25 p-[var(--dash-inner-pad)]">
-        <div
-          aria-hidden="true"
-          className="pointer-events-none absolute left-[16.66%] right-[16.66%] top-[calc(var(--dash-inner-pad)+1.25rem)] h-0.5 -translate-y-1/2 overflow-hidden rounded-full bg-system-gray-200/80"
-        >
-          <motion.div
-            className="relative h-full overflow-hidden rounded-full bg-gradient-to-r from-stratosort-warning/70 via-stratosort-blue/80 to-stratosort-success"
-            initial={reduceMotion ? false : { width: '0%' }}
-            animate={{ width: `${railPct}%` }}
-            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
+      <div className="mt-[var(--dash-section-gap)] rounded-xl border border-border-soft/50 bg-system-gray-100/25 p-[var(--dash-inner-pad)] lg:flex lg:flex-1 lg:flex-col lg:justify-center">
+        <div className="relative">
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute left-[16.66%] right-[16.66%] top-5 h-0.5 -translate-y-1/2 overflow-hidden rounded-full bg-system-gray-200/80"
           >
-            {/* Travelling sheen only while work is actually moving — silenced under
+            <motion.div
+              className="relative h-full overflow-hidden rounded-full bg-gradient-to-r from-stratosort-warning/70 via-stratosort-blue/80 to-stratosort-success"
+              initial={reduceMotion ? false : { width: '0%' }}
+              animate={{ width: `${railPct}%` }}
+              transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
+            >
+              {/* Travelling sheen only while work is actually moving — silenced under
                 reduced motion by the utility's own media query (styles.css). */}
-            {inFlight > 0 ? <span aria-hidden="true" className="pipeline-rail-sheen" /> : null}
-          </motion.div>
-        </div>
-        <div className="relative z-10 flex items-start justify-between gap-compact">
-          <PipelineStage
-            icon={Sparkles}
-            label="Awaiting analysis"
-            value={stats.pending}
-            tone="warning"
-            isEntryHint={isEmpty}
-            onClick={onPendingStage}
-          />
-          <PipelineStage
-            icon={FolderInput}
-            label="Ready to organize"
-            value={stats.ready}
-            tone="accent"
-            onClick={onReadyStage}
-          />
-          <PipelineStage
-            icon={CheckCircle2}
-            label="Organized"
-            value={organizedCount}
-            tone="success"
-            onClick={onOrganizedStage}
-          />
+              {inFlight > 0 ? <span aria-hidden="true" className="pipeline-rail-sheen" /> : null}
+            </motion.div>
+          </div>
+          <div className="relative z-10 flex items-start justify-between gap-compact">
+            <PipelineStage
+              icon={Sparkles}
+              label="Awaiting analysis"
+              value={stats.pending}
+              tone="warning"
+              isEntryHint={isEmpty}
+              onClick={onPendingStage}
+            />
+            <PipelineStage
+              icon={FolderInput}
+              label="Ready to organize"
+              value={stats.ready}
+              tone="accent"
+              onClick={onReadyStage}
+            />
+            <PipelineStage
+              icon={CheckCircle2}
+              label="Organized"
+              value={organizedCount}
+              tone="success"
+              onClick={onOrganizedStage}
+            />
+          </div>
         </div>
       </div>
       <div className="mt-[var(--dash-section-gap)] flex items-center justify-between gap-cozy lg:mt-auto lg:pt-[var(--dash-section-gap)]">
@@ -446,9 +448,9 @@ function QuickActionTile({ icon: Icon, title, description, onClick, tone }) {
       type="button"
       variant="interactive"
       onClick={onClick}
-      className="dashboard-tile group/tile interactive-lift text-left w-full h-full focus-visible:ring-2 focus-visible:ring-stratosort-blue focus-visible:ring-offset-2 focus-visible:outline-none"
+      className="dashboard-tile group/tile interactive-lift flex items-center text-left w-full h-full focus-visible:ring-2 focus-visible:ring-stratosort-blue focus-visible:ring-offset-2 focus-visible:outline-none"
     >
-      <div className="flex items-start gap-cozy">
+      <div className="flex w-full items-start gap-cozy">
         <span
           className={`mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-transform duration-150 ease-out group-hover/tile:scale-105 ${
             ACTION_TONE[tone] || ACTION_TONE.blue
@@ -746,7 +748,7 @@ export default function DashboardView() {
   return (
     <div
       {...dragProps}
-      className={`dashboard-view relative flex w-full flex-col rounded-2xl transition-shadow ${
+      className={`dashboard-view relative flex w-full flex-col rounded-2xl lg:flex-1 transition-shadow ${
         isDragging ? 'ring-2 ring-stratosort-blue/40 ring-offset-2' : ''
       }`}
     >
@@ -775,7 +777,7 @@ export default function DashboardView() {
         variants={STAGGER_VARIANTS}
         initial="hidden"
         animate="show"
-        className="relative z-10 flex flex-col gap-[var(--dash-gap)]"
+        className="relative z-10 flex flex-col gap-[var(--dash-gap)] lg:flex-1"
       >
         <motion.div variants={blockVariants}>
           <HeroBand
@@ -787,14 +789,17 @@ export default function DashboardView() {
           />
         </motion.div>
 
-        <motion.div variants={blockVariants} className="flex flex-col gap-[var(--dash-gap)]">
+        <motion.div
+          variants={blockVariants}
+          className="flex flex-col gap-[var(--dash-gap)] lg:flex-1"
+        >
           {isAnalyzing && progress && <AnalysisProgress progress={progress} />}
 
           {/* Live-status zone — the two surfaces that answer "what's happening?".
               The pipeline holds the aggregate counts; the activity rail holds the
               individual items behind those counts, so they are paired and share a
               height via items-stretch rather than living in separate columns. */}
-          <div className="grid grid-cols-1 gap-[var(--dash-gap)] lg:grid-cols-[2fr_1fr] lg:items-stretch">
+          <div className="grid grid-cols-1 gap-[var(--dash-gap)] lg:grow lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] lg:items-stretch">
             <PipelineCard
               stats={stats}
               organizedCount={organizedCount}
@@ -827,7 +832,7 @@ export default function DashboardView() {
           {/* Get-things-done zone — shortcuts to the working surfaces paired with
               the smart-folder destinations they feed. Same 2fr/1fr split as the
               status row above so the column gutter lines up down the page. */}
-          <div className="grid grid-cols-1 gap-[var(--dash-gap)] lg:grid-cols-[2fr_1fr] lg:items-stretch">
+          <div className="grid grid-cols-1 gap-[var(--dash-gap)] lg:grow lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] lg:items-stretch">
             <Card variant="default" className="h-full lg:flex lg:flex-col">
               <SectionLabel>Quick actions</SectionLabel>
               <div className="mt-[var(--dash-section-gap)] grid grid-cols-1 gap-cozy sm:grid-cols-3 sm:items-stretch lg:flex-1">
@@ -865,7 +870,7 @@ export default function DashboardView() {
           {/* Knowledge layer — a pride-surface summary of every file the local
               AI has processed. Sits at the foot of the board so it reads as a
               reward / closing thought after the pipeline and quick-action rows. */}
-          <KnowledgeStatsCard />
+          <KnowledgeStatsCard className="lg:flex lg:grow lg:flex-col" />
         </motion.div>
       </motion.div>
     </div>
diff --git a/src/renderer/components/dashboard/KnowledgeStatsCard.jsx b/src/renderer/components/dashboard/KnowledgeStatsCard.jsx
index 04e2e7a..591619c 100644
--- a/src/renderer/components/dashboard/KnowledgeStatsCard.jsx
+++ b/src/renderer/components/dashboard/KnowledgeStatsCard.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import { CalendarRange, Archive, HardDrive, Tags } from 'lucide-react';
 import { formatBytes } from '../../utils/format';
 import { isIsoDateOnly } from '../../../shared/contentDateSanity';
@@ -83,8 +84,11 @@ function StatTile({ icon: Icon, value, label }) {
  * KnowledgeStatsCard — a "pride-surface" summary of everything the user's
  * local AI has seen. Fetches once on mount via the preload bridge; no Redux
  * dependency (all data comes from analysisHistory, not the file pipeline).
+ *
+ * @param {{ className?: string }} props - className lets the dashboard make the
+ *   card fill its row (the stats row then centers in the extra height).
  */
-export default function KnowledgeStatsCard() {
+export default function KnowledgeStatsCard({ className = '' }) {
   const [stats, setStats] = useState(/** @type {KnowledgeStats | null} */ (null));
   const [error, setError] = useState(false);
 
@@ -113,7 +117,7 @@ export default function KnowledgeStatsCard() {
   // API unavailable or thrown
   if (error) {
     return (
-      <Card variant="default">
+      <Card variant="default" className={className}>
         <SectionLabel>Your knowledge layer</SectionLabel>
         <Text variant="tiny" className="mt-compact block text-system-gray-500" role="alert">
           Knowledge stats unavailable.
@@ -125,7 +129,7 @@ export default function KnowledgeStatsCard() {
   // Loading
   if (stats === null) {
     return (
-      <Card variant="default">
+      <Card variant="default" className={className}>
         <SectionLabel>Your knowledge layer</SectionLabel>
         <div role="status" className="mt-compact text-micro text-system-gray-500">
           Loading…
@@ -142,7 +146,7 @@ export default function KnowledgeStatsCard() {
   // banner carries the detail).
   if (stats.isEmpty === undefined && stats.totalFiles === undefined) {
     return (
-      <Card variant="default">
+      <Card variant="default" className={className}>
         <SectionLabel>Your knowledge layer</SectionLabel>
         <Text variant="tiny" className="mt-compact block text-system-gray-500" role="alert">
           Knowledge stats unavailable.
@@ -154,7 +158,7 @@ export default function KnowledgeStatsCard() {
   // Empty state — explicit zero-entry stats only (see the degraded guard above).
   if (stats.isEmpty || !(Number(stats.totalFiles) > 0)) {
     return (
-      <Card variant="default">
+      <Card variant="default" className={className}>
         <SectionLabel>Your knowledge layer</SectionLabel>
         <Text variant="small" className="mt-compact block text-system-gray-600">
           Analyze files to build your knowledge layer.
@@ -200,10 +204,10 @@ export default function KnowledgeStatsCard() {
   );
 
   return (
-    <Card variant="default">
+    <Card variant="default" className={className}>
       <SectionLabel>Your knowledge layer</SectionLabel>
       <div
-        className={`mt-cozy grid grid-cols-2 gap-cozy ${
+        className={`mt-cozy grid grid-cols-2 gap-cozy lg:flex-1 lg:content-center ${
           tiles.length === 4 ? 'sm:grid-cols-4' : 'sm:grid-cols-3'
         }`}
       >
@@ -214,3 +218,7 @@ export default function KnowledgeStatsCard() {
     </Card>
   );
 }
+
+KnowledgeStatsCard.propTypes = {
+  className: PropTypes.string
+};
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 8867788..f09a0b9 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -2813,7 +2813,7 @@
     }
   }
 
-  @media (max-height: 760px) {
+  @media (max-height: 800px) {
     .dashboard-view {
       --dash-gap: 0.5rem;
       --dash-section-gap: 0.5rem;