From f3fc5e88ba54a50fb4e599dac6b9c53d9b758bed Mon Sep 17 00:00:00 2001
From: Bretton <36870434+BrettM86@users.noreply.github.com>
Date: Mon, 20 Jul 2026 00:31:20 -0700
Subject: [PATCH] fix(post): polish post header and card spacing

Three small UI fixes to post rendering surfaced during dev QA:

Changes:
- PostMeta: the CommunityLink anchor is a direct grid child, so it
  stretched to fill the entire header column and its hover/click
  target extended far past the text. justify-self-start sizes it to
  its content; long handles still ellipsize at the track edge.
- Post page: the Material card wrapped the post with padding="none",
  leaving the avatar, embed, and action bar flush against the card
  border. px-4 insets content horizontally (vertical inset already
  comes from the article's py-5).
- UserLink: when a user has no displayName the primary text falls
  back to the handle, and the instance suffix rendered it a second
  time ("mari.dev@mari.dev"). The suffix now renders only when the
  shown name differs from the handle.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/lib/feature/post/PostMeta.svelte                  |  2 +-
 src/lib/feature/user/UserLink.svelte                  | 10 ++++++++--
 src/routes/c/[handle=handle]/post/[rkey]/+page.svelte |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/lib/feature/post/PostMeta.svelte b/src/lib/feature/post/PostMeta.svelte
index 391c938d..47691785 100644
--- a/src/lib/feature/post/PostMeta.svelte
+++ b/src/lib/feature/post/PostMeta.svelte
@@ -204,7 +204,7 @@
     <CommunityLink
       {community}
       style="grid-area: community;"
-      class="shrink no-list-margin"
+      class="shrink no-list-margin justify-self-start"
     />
   {/if}
   <div
diff --git a/src/lib/feature/user/UserLink.svelte b/src/lib/feature/user/UserLink.svelte
index 8cf0b670..0613c83e 100644
--- a/src/lib/feature/user/UserLink.svelte
+++ b/src/lib/feature/user/UserLink.svelte
@@ -82,6 +82,12 @@
   }: Props = $props()
 
   let envBadge = $derived(getEnvBadge(user.did))
+  let shownName = $derived(
+    displayName ? user.displayName || user.handle : user.handle,
+  )
+  // Without a displayName the primary text already IS the handle — appending
+  // "@handle" would render it twice (e.g. "mari.dev@mari.dev").
+  let showHandleSuffix = $derived(showInstance && shownName !== user.handle)
 </script>
 
 <a
@@ -106,9 +112,9 @@
       class:font-medium={showInstance}
       class="username-text {envBadge && envBadge.classes}"
     >
-      {displayName ? user.displayName || user.handle : user.handle}
+      {shownName}
     </span>
-    {#if showInstance}
+    {#if showHandleSuffix}
       <span
         class="text-slate-500 dark:text-zinc-500 font-normal instance-text shrink {instanceClass ??
           ''}"
diff --git a/src/routes/c/[handle=handle]/post/[rkey]/+page.svelte b/src/routes/c/[handle=handle]/post/[rkey]/+page.svelte
index a38138d5..af93f746 100644
--- a/src/routes/c/[handle=handle]/post/[rkey]/+page.svelte
+++ b/src/routes/c/[handle=handle]/post/[rkey]/+page.svelte
@@ -171,7 +171,7 @@
   {#if data.data.value?.post}
     {@const post = data.data.value.post}
 
-    <Material padding="none" rounding="2xl" class="overflow-hidden">
+    <Material padding="none" rounding="2xl" class="overflow-hidden px-4">
       <Post {post} actions={true} view="cozy" />
     </Material>
 
-- 
2.51.2