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 @@
Looking for posts from people you follow…
{:else}
- event.id} columnWidth={80} maxColumns={2} gap={3}>
- {#snippet child(event)}
-
- {/snippet}
-
+ {#each items as event (event.id)}
+
+ {/each}
{#if 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),
- ),
- )
-
- {#each columns as column, index (index)}
-
- {#each column as item (getKey(item))}
- {@render child(item)}
- {/each}
+
+ {#each items as item (getKey(item))}
+
+ {@render child(item)}
{/each}
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 @@
-
-
-
- Home
-
-
{today}
+
+
+ Home