dashboard: push breadcrumb + actions below the hero, max space for panels

User wanted the Home/Dashboard label and the top-right buttons moved
downward so the content panels reclaim as much vertical space as
possible.

New order:
  1. Hero (greeting + quote)   — very top, 18px top padding
  2. Meta row (breadcrumb + action buttons) — 12px below hero
  3. 3-column grid              — 10px below meta row

All vertical padding trimmed compared to the previous iteration. The
hero is the first thing on the page (no chrome bar above it), the
breadcrumb and buttons are now chrome-adjacent rather than chrome-first,
and the panels sit right below without a wide empty band.

Author: Jose Cruz

frontend/src/components/screens/Dashboard.tsx

@@ -561,37 +561,12 @@ export function Dashboard() {
 
   return (
     <div>
-      {/* Meta row sits at the very top: breadcrumb left, primary actions
-          right. No chrome bar, no border — flows on top of the atmospheric
-          backdrop. */}
-      <div
-        style={{
-          padding: isMobile ? "14px 20px 0" : "18px 32px 0",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 12,
-          flexWrap: "wrap",
-        }}
-      >
-        <span className="label-micro">Home / Dashboard</span>
-        <div style={{ display: "flex", gap: 8 }}>
-          <button className="btn btn--sm" onClick={() => router.push("/library")}>
-            <Icon name="search" size={13} /> Library
-          </button>
-          <button className="btn btn--sm btn--primary" onClick={() => router.push("/learn")}>
-            <Icon name="sparkle" size={13} /> Start learning
-          </button>
-        </div>
-      </div>
-
-      {/* Hero drops below the meta row now. Greeting types in, then
-          the quote fades in (0.7s) once typing completes — same
-          sequence as the pre-revamp dashboard. */}
+      {/* Hero at the very top — zero TopBar above it, tight top padding
+          so the greeting is literally the first thing on the page. */}
       <div
         style={{
           textAlign: "center",
-          padding: isMobile ? "20px 20px 4px" : "28px 32px 8px",
+          padding: isMobile ? "14px 20px 0" : "18px 32px 0",
         }}
       >
         <h1
@@ -611,7 +586,7 @@ export function Dashboard() {
           <p
             className="body-serif"
             style={{
-              margin: "10px auto 0",
+              margin: "8px auto 0",
               maxWidth: 640,
               fontSize: 14,
               fontStyle: "italic",
@@ -626,6 +601,29 @@ export function Dashboard() {
         )}
       </div>
 
+      {/* Meta row pushed DOWN below the hero, tight padding. Breadcrumb
+          left, actions right — one line of chrome, no bar. */}
+      <div
+        style={{
+          padding: isMobile ? "10px 20px 0" : "12px 32px 0",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12,
+          flexWrap: "wrap",
+        }}
+      >
+        <span className="label-micro">Home / Dashboard</span>
+        <div style={{ display: "flex", gap: 8 }}>
+          <button className="btn btn--sm" onClick={() => router.push("/library")}>
+            <Icon name="search" size={13} /> Library
+          </button>
+          <button className="btn btn--sm btn--primary" onClick={() => router.push("/learn")}>
+            <Icon name="sparkle" size={13} /> Start learning
+          </button>
+        </div>
+      </div>
+
       {suggestNode && !suggestDismissed && (
         <div style={{ padding: "14px 32px 0" }}>
           <div className="card fade-in" style={{ padding: "14px 18px", display: "flex", gap: 14, alignItems: "center", borderColor: "var(--accent-border)", background: "var(--accent-soft)" }}>
@@ -664,8 +662,9 @@ export function Dashboard() {
 
       <div
         style={{
-          // Tight top padding so panels start immediately below the meta row.
-          padding: isMobile ? "12px 20px 16px" : "14px 32px 24px",
+          // Very tight top padding so panels start immediately below the
+          // meta row — maximises the space the content panels can claim.
+          padding: isMobile ? "8px 20px 16px" : "10px 32px 24px",
           display: "grid", gap: 16,
           // Pre-revamp layout: narrow left (courses), wide middle (graph),
           // narrow right (stats/upcoming/learn-next). Matches the 300px /