Center the home page content and let its section rules reach the page edge

src/app/components/HomeNetwork.svelte

@@ -94,15 +94,15 @@
         <Link href="/spaces" class="button button-neutral button-sm">Browse spaces</Link>
       </div>
     {:else if items.length === 0}
-      <div class="flex justify-center pb-4">
+      <div class="flex justify-center py-8">
-        <Spinner loading>Looking for posts from people you follow…</Spinner>
+        <Spinner loading>Loading recent posts...</Spinner>
       </div>
     {:else}
       {#each items as event (event.id)}
         <HomeNetworkItem {event} {context} />
       {/each}
       {#if loading}
-        <div class="flex justify-center py-4">
+        <div class="flex justify-center py-8">
           <Spinner loading />
         </div>
       {/if}

src/app/components/HomeSection.svelte

@@ -13,7 +13,7 @@
   const {title, icon, action, children, class: className = ""}: Props = $props()
 </script>
 
-<section class="flex min-w-0 flex-col border-b border-line {className}">
+<section class="rule-bleed flex min-w-0 flex-col border-b border-line {className}">
   <div class="flex items-center justify-between gap-3 px-4 pt-4 pb-3">
     <h2 class="flex items-center gap-2 text-base font-bold tracking-wide uppercase">
       <Icon {icon} size={5} />

src/lib/components/base.css

@@ -105,6 +105,30 @@
   content-visibility: auto;
   contain-intrinsic-size: auto 16rem;
 }
+/* Carries a bottom border out past the element's own box, so a centered column can still rule the
+   page from edge to edge. The pseudo-elements inherit that border, so an element without one draws
+   nothing; --rule-bleed-l and --rule-bleed-r turn off the side that faces a neighbor. */
+@utility rule-bleed {
+  position: relative;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: calc(-1 * var(--border-thin));
+    border-bottom: inherit;
+  }
+
+  &::before {
+    right: 100%;
+    width: var(--rule-bleed-l, 100vw);
+  }
+
+  &::after {
+    left: 100%;
+    width: var(--rule-bleed-r, 100vw);
+  }
+}
 /* Marks the event a link pointed at, so the reader can pick it out of the conversation once the
    jump lands. Brightness rather than a background so it works over any row's own surface. */
 @utility highlight-target {

src/routes/home/+page.svelte

@@ -33,15 +33,20 @@
     </div>
   </PageBar>
   <PageContent noPad bind:element class="flex flex-col bg-surface">
-    <div class="flex min-w-0 flex-1 flex-col lg:flex-row lg:items-stretch">
+    <!-- Content is centered and capped, but the section rules still reach the page edge. At lg
+         each column bleeds only on the side facing the page, so no rule crosses the divider. -->
+    <div
+      class="mx-auto flex w-full max-w-[1000px] min-w-0 flex-1 flex-col lg:flex-row lg:items-stretch">
       <!-- The columns are `contents` below lg, which puts every section in one flow and lets the
            rail's health checks sit between the inbox and the rest of the main column. -->
-      <div class="contents lg:flex lg:min-w-0 lg:flex-[2] lg:flex-col lg:border-r lg:border-line">
+      <div
+        class="contents lg:flex lg:min-w-0 lg:flex-[2] lg:flex-col lg:border-r lg:border-line lg:[--rule-bleed-r:0px]">
         <HomeInbox />
         <HomeActivity class="order-last" />
         <HomeNetwork class="order-last border-b-0" />
       </div>
-      <div class="contents lg:flex lg:w-96 lg:min-w-0 lg:shrink-0 lg:flex-col">
+      <div
+        class="contents lg:flex lg:w-96 lg:min-w-0 lg:shrink-0 lg:flex-col lg:[--rule-bleed-l:0px]">
         <HomeHealthChecks />
         {#if HOSTING_ENABLED}
           <HomeHosting class="border-b-0 max-lg:hidden" />