Lay the home page out like the profile page (#617)

src/app/components/HomeActivity.svelte

@@ -8,13 +8,12 @@
   import {displayContentCount} from "@app/content"
   import {inboxSpaceContent} from "@app/inbox"
   import {makeSpacePath} from "@app/routes"
-
-  const {class: className = ""}: {class?: string} = $props()
 </script>
 
 {#if $inboxSpaceContent.length > 0}
-  <HomeSection title="Activity" icon={Feed} class={className}>
+  <HomeSection title="Activity" icon={Feed}>
-    <div class="scroll-container flex items-stretch gap-3 overflow-x-auto px-4 pb-4">
+    <div
+      class="scroll-container flex items-stretch gap-3 overflow-x-auto border-t border-line bg-surface-less p-4">
       {#each $inboxSpaceContent as { url, timestamp, countsByKind } (url)}
         <Link
           href={makeSpacePath(url)}

src/app/components/HomeInbox.svelte

@@ -25,13 +25,14 @@
     {/if}
   {/snippet}
   {#if conversations.length > 0}
-    <div class="flex flex-col gap-3 px-4 pb-4">
+    <div class="flex flex-col gap-3 border-t border-line bg-surface-less p-4">
       {#each conversations as conversation (conversation.path)}
         <HomeInboxItem {conversation} />
       {/each}
     </div>
   {:else}
-    <div class="flex flex-col items-center gap-3 px-4 pb-8 text-center">
+    <div
+      class="flex flex-col items-center gap-3 border-t border-line bg-surface-less px-4 py-8 text-center">
       <p class="font-medium">You're all caught up</p>
       <p class="max-w-md text-sm opacity-75">
         The rooms, space chats and direct messages you belong to show what's unread here.

src/app/components/HomeInboxItemCard.svelte

@@ -28,13 +28,16 @@
       <span class="truncate opacity-50">{@render subtitle()}</span>
     </div>
     <div class="flex min-w-0 items-center gap-1 text-sm opacity-75">
-      <span class="shrink-0">
+      <div class="flex max-w-1/2 shrink-0 items-center">
+        <span class="truncate">
           {#if event.pubkey === $user.pubkey}
-          You:
+            You
           {:else}
-          <ProfileName pubkey={event.pubkey} {url} />:
+            <ProfileName pubkey={event.pubkey} {url} />
           {/if}
         </span>
+        <span>:</span>
+      </div>
       <div class="min-w-0 flex-1">
         <NoteContentMinimal {event} {url} singleLine />
       </div>

src/app/components/HomeNetwork.svelte

@@ -84,7 +84,7 @@
 </script>
 
 <HomeSection title="Network" icon={Planet} class={className}>
-  <div class="flex flex-col gap-3 px-4 pb-4" bind:this={element}>
+  <div class="flex flex-col gap-3 border-t border-line bg-surface-less p-4" bind:this={element}>
     {#if isEmpty}
       <div class="flex flex-col items-center gap-3 pb-4 text-center">
         <p class="font-medium">Follow a few people to fill this out</p>

src/app/components/HomeSection.svelte

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

src/lib/components/base.css

@@ -105,30 +105,6 @@
   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);
-  }
-}
 /* The wash is an inset shadow because a row's hover rule sets a background that would cover it. */
 @utility highlight-target {
   box-shadow:

src/routes/home/+page.svelte

@@ -5,7 +5,6 @@
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Page from "@lib/components/Page.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import ScrollToTop from "@lib/components/ScrollToTop.svelte"
   import HomeInbox from "@app/components/HomeInbox.svelte"
@@ -28,39 +27,34 @@
 </script>
 
 <Page>
-  <PageBar>
+  <PageContent bind:element class="p-0 md:p-4">
-    <div class="flex items-center justify-between gap-4">
+    <div class="mx-auto flex w-full max-w-[1200px] min-w-0 flex-col gap-3">
-      <div class="flex items-center gap-2">
+      <div class="flex items-center justify-between gap-4 px-4 py-3 md:px-2 md:pt-0">
+        <h1 class="flex items-center gap-2 text-xl font-bold">
           <Icon icon={Home} size={6} />
-        <strong>Home</strong>
+          Home
-      </div>
+        </h1>
         <Link href="/spaces" class="button button-neutral button-sm">
           <Icon icon={Widget} size={4} />
           Browse spaces
         </Link>
       </div>
-  </PageBar>
+      <div class="flex min-w-0 flex-col gap-3 lg:flex-row lg:items-start">
-  <PageContent noPad bind:element class="flex flex-col bg-surface">
+        <!-- Both columns are `contents` below lg, which puts every section in one flow and lets
-    <!-- Content is centered and capped, but the section rules still reach the page edge. At lg
+             the rail sit between the day's activity and the feed that would otherwise bury it. -->
-         each column bleeds only on the side facing the page, so no rule crosses the divider. -->
+        <div class="contents lg:flex lg:min-w-0 lg:flex-1 lg:flex-col lg:gap-3">
-    <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 lg:[--rule-bleed-r:0px]">
           <HomeInbox />
-        <HomeActivity class="order-last" />
+          <HomeActivity />
-        <HomeNetwork class="order-last border-b-0" />
+          <HomeNetwork class="order-last lg:order-none" />
         </div>
-      <div
+        <div class="contents lg:flex lg:w-80 lg:shrink-0 lg:flex-col lg:gap-3">
-        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" />
+            <HomeHosting class="max-lg:hidden" />
           {/if}
         </div>
       </div>
+    </div>
   </PageContent>
   <ScrollToTop {element} />
 </Page>