From 569d11a328d3d25bcf330802bcef7ad167cc25f1 Mon Sep 17 00:00:00 2001
From: Coracle-Bot <npub1klq6260@nostr.local>
Date: Wed, 9 Sep 2026 15:32:09 +0000
Subject: [PATCH] Drop the date from the home header and lay the network feed
 out in one column

---
 src/app/components/HomeNetwork.svelte |  9 +++----
 src/lib/components/Masonry.svelte     | 35 +++++++--------------------
 src/routes/home/+page.svelte          | 15 +++---------
 3 files changed, 15 insertions(+), 44 deletions(-)

diff --git a/src/app/components/HomeNetwork.svelte b/src/app/components/HomeNetwork.svelte
index 51eeda96..a05374ce 100644
--- a/src/app/components/HomeNetwork.svelte
+++ b/src/app/components/HomeNetwork.svelte
@@ -9,7 +9,6 @@
   import {getReplyTags} from "@welshman/domain"
   import Planet from "@assets/icons/planet.svg?dataurl"
   import Link from "@lib/components/Link.svelte"
-  import Masonry from "@lib/components/Masonry.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import HomeSection from "@app/components/HomeSection.svelte"
   import HomeNetworkItem from "@app/components/HomeNetworkItem.svelte"
@@ -99,11 +98,9 @@
         <Spinner loading>Looking for posts from people you follow…</Spinner>
       </div>
     {:else}
-      <Masonry {items} getKey={event => event.id} columnWidth={80} maxColumns={2} gap={3}>
-        {#snippet child(event)}
-          <HomeNetworkItem {event} {context} />
-        {/snippet}
-      </Masonry>
+      {#each items as event (event.id)}
+        <HomeNetworkItem {event} {context} />
+      {/each}
       {#if loading}
         <div class="flex justify-center py-4">
           <Spinner loading />
diff --git a/src/lib/components/Masonry.svelte b/src/lib/components/Masonry.svelte
index 8b3ebd9b..1913e084 100644
--- a/src/lib/components/Masonry.svelte
+++ b/src/lib/components/Masonry.svelte
@@ -5,40 +5,23 @@
     items: T[]
     child: Snippet<[T]>
     getKey: (item: T) => PropertyKey
+    // Minimum column width, in tailwind spacing units (1 = 0.25rem). The browser
+    // fits as many columns as the container allows, so the layout stays
+    // responsive without media queries.
     columnWidth?: number
-    maxColumns?: number
+    // Space between columns and between stacked items, in tailwind units.
     gap?: number
   }
 
-  // columnWidth and gap are tailwind spacing units, not pixels.
-  const {items, child, getKey, columnWidth = 72, maxColumns = Infinity, gap = 3}: Props = $props()
-
-  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+  const {items, child, getKey, columnWidth = 72, gap = 3}: Props = $props()
 
   const rem = (units: number) => `${units * 0.25}rem`
-
-  let width = $state(0)
-
-  const count = $derived(
-    Math.min(maxColumns, Math.max(1, Math.floor(width / (columnWidth * 0.25 * rootFontSize)))),
-  )
-
-  // Which column an item lands in depends only on its index, so appending to `items` leaves
-  // everything already on screen where it was. CSS multi-column balances the columns instead,
-  // which reshuffles the whole list every time an infinite scroll loads another page.
-  const columns = $derived(
-    Array.from({length: count}, (_, column) =>
-      items.filter((_, index) => index % count === column),
-    ),
-  )
 </script>
 
-<div class="flex items-start" style="gap: {rem(gap)};" bind:clientWidth={width}>
-  {#each columns as column, index (index)}
-    <div class="flex min-w-0 flex-1 flex-col" style="gap: {rem(gap)};">
-      {#each column as item (getKey(item))}
-        {@render child(item)}
-      {/each}
+<div style="column-width: {rem(columnWidth)}; column-gap: {rem(gap)};">
+  {#each items as item (getKey(item))}
+    <div class="break-inside-avoid" style="margin-bottom: {rem(gap)};">
+      {@render child(item)}
     </div>
   {/each}
 </div>
diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
index 814b67e2..1388d98f 100644
--- a/src/routes/home/+page.svelte
+++ b/src/routes/home/+page.svelte
@@ -17,12 +17,6 @@
 
   let element: Element | undefined = $state()
 
-  const today = new Date().toLocaleDateString(undefined, {
-    weekday: "long",
-    month: "short",
-    day: "numeric",
-  })
-
   // A single-space build has no dashboard to show - everything on it is scoped to the one space.
   onMount(() => {
     if (PLATFORM_RELAYS.length > 0) {
@@ -33,12 +27,9 @@
 
 <Page>
   <PageBar>
-    <div class="flex items-center justify-between gap-2">
-      <div class="flex items-center gap-2">
-        <Icon icon={Home} size={6} />
-        <strong>Home</strong>
-      </div>
-      <span class="hidden text-sm opacity-75 sm:inline">{today}</span>
+    <div class="flex items-center gap-2">
+      <Icon icon={Home} size={6} />
+      <strong>Home</strong>
     </div>
   </PageBar>
   <PageContent noPad bind:element class="flex flex-col bg-surface">