Drop the date from the home header and lay the network feed out in one column

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}>
+      {#each items as event (event.id)}
-        {#snippet child(event)}
+        <HomeNetworkItem {event} {context} />
-          <HomeNetworkItem {event} {context} />
+      {/each}
-        {/snippet}
-      </Masonry>
       {#if loading}
         <div class="flex justify-center py-4">
           <Spinner loading />

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, gap = 3}: Props = $props()
-  const {items, child, getKey, columnWidth = 72, maxColumns = Infinity, gap = 3}: Props = $props()
-
-  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
 
   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}>
+<div style="column-width: {rem(columnWidth)}; column-gap: {rem(gap)};">
-  {#each columns as column, index (index)}
+  {#each items as item (getKey(item))}
-    <div class="flex min-w-0 flex-1 flex-col" style="gap: {rem(gap)};">
+    <div class="break-inside-avoid" style="margin-bottom: {rem(gap)};">
-      {#each column as item (getKey(item))}
+      {@render child(item)}
-        {@render child(item)}
-      {/each}
     </div>
   {/each}
 </div>

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">
-      <div class="flex items-center gap-2">
+      <Icon icon={Home} size={6} />
-        <Icon icon={Home} size={6} />
+      <strong>Home</strong>
-        <strong>Home</strong>
-      </div>
-      <span class="hidden text-sm opacity-75 sm:inline">{today}</span>
     </div>
   </PageBar>
   <PageContent noPad bind:element class="flex flex-col bg-surface">