From f692cf7177856660e10d693381da6c6a5702ef8a Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Wed, 14 Oct 2026 16:36:28 -0400
Subject: [PATCH] Home: align header, sticky side columns, tidy verse header,
 move backup line

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/components/iq/IqDailyCard.jsx |  4 ++--
 src/pages/HomePage.jsx            | 24 +++++++++++++-----------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/iq/IqDailyCard.jsx b/src/components/iq/IqDailyCard.jsx
index 06780bf..50cddc7 100644
--- a/src/components/iq/IqDailyCard.jsx
+++ b/src/components/iq/IqDailyCard.jsx
@@ -60,8 +60,8 @@ function Card({ iq }) {
     <section className="mb-4 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5" aria-label="Daily verse and devotional">
       {verse && (
         <div>
-          <div className="flex items-center justify-between gap-2">
-            <p className="text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Verse of the day</p>
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <p className="whitespace-nowrap text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Verse of the day</p>
             <span className="flex items-center gap-1.5">
             <select aria-label="Verse of the day background" value={bgChoice} onChange={(e) => pickBackground(e.target.value)}
               className="rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-0.5 text-xs">
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 21b8f7e..720bb43 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -138,6 +138,7 @@ export default function HomePage() {
     <PageShell
       title="My Studies"
       active="studies"
+      maxWidth="max-w-6xl xl:max-w-[88rem]"
       actions={(
         <>
           <button type="button" onClick={() => setCurrentPage('insights')} className={linkBtn} title="This week, themes, words, what slipped, follow-ups">Insights</button>
@@ -148,21 +149,12 @@ export default function HomePage() {
     >
       <main className="mx-auto grid max-w-6xl gap-y-6 px-4 py-6 lg:grid-cols-[minmax(0,1fr)_21rem] xl:max-w-[88rem] xl:grid-cols-[auto_minmax(0,1fr)_21rem]">
         {/* Left column: the recall and daily-verse cards (collapses when neither has anything to show) */}
-        <aside className="empty:hidden lg:col-span-2 xl:col-span-1 xl:w-80 xl:pr-6">
+        <aside className="empty:hidden lg:col-span-2 xl:sticky xl:top-16 xl:col-span-1 xl:max-h-[calc(100vh-5rem)] xl:w-80 xl:self-start xl:overflow-y-auto xl:pr-6">
           <WeeklyRecall />
           <IqDailyCard />
         </aside>
 
         <section className="min-w-0 lg:pr-6">
-          {projectIndex.length > 0 && (() => {
-            const age = backupAge(lastBackupAt());
-            return (
-              <p className={`mb-3 flex flex-wrap items-center gap-2 px-1 text-xs ${age.stale ? 'text-[var(--r-danger,#b42318)]' : 'text-[var(--r-sub)]'}`}>
-                {age.text}.
-                <button type="button" onClick={openBackup} className="text-[var(--r-accent)] hover:underline">Back up now</button>
-              </p>
-            );
-          })()}
           <DailyFive />
           {autoRestoredCount !== null && (
             <div className={notice}>Synced {autoRestoredCount} project{autoRestoredCount > 1 ? 's' : ''} from another device.</div>
@@ -346,7 +338,7 @@ export default function HomePage() {
           )}
         </section>
 
-        <aside className="space-y-4">
+        <aside className="space-y-4 lg:sticky lg:top-16 lg:max-h-[calc(100vh-5rem)] lg:self-start lg:overflow-y-auto">
           <TodayCard planProgress={planProgress} readingActivity={readingActivity} openReadingPlans={openReadingPlans}
             openPlanReading={openPlanReading} studyReadingPlanDay={studyReadingPlanDay} studyBuildBusy={studyBuildBusy} />
 
@@ -385,6 +377,16 @@ export default function HomePage() {
               </>
             )}
           />
+
+          {projectIndex.length > 0 && (() => {
+            const age = backupAge(lastBackupAt());
+            return (
+              <p className={`flex flex-wrap items-center gap-2 px-1 text-xs ${age.stale ? 'text-[var(--r-danger,#b42318)]' : 'text-[var(--r-sub)]'}`}>
+                {age.text}.
+                <button type="button" onClick={openBackup} className="text-[var(--r-accent)] hover:underline">Back up now</button>
+              </p>
+            );
+          })()}
         </aside>
       </main>
     </PageShell>