fix(StoryTray): align Add Story circle with PawRing items

PawRing containers are size+RING_PAD*2=72px tall while the Add Story
button was only 56px, causing vertical misalignment. Wrap the button
in a matching 72px container so all tray items share the same height.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Sonnet 4.6 committed 2026-06-13 12:44:57 +02:00
1 parent 4b2760a08d
commit 7fafc6d17f
1 file changed
+15 -8
+15 -8
View File
@@ -18,6 +18,8 @@ import { StoryForm } from "@/components/stories/StoryForm";
import { getAvatarUrl } from "@/lib/avatar-url";
const TRAY_AVATAR_SIZE = 56; // px
const RING_PAD = 8; // must match PawRing's RING_PAD constant
const TRAY_ITEM_SIZE = TRAY_AVATAR_SIZE + RING_PAD * 2; // total height of a PawRing container
/**
* StoryTray — horizontal scroll row at the top of the feed.
@@ -53,16 +55,21 @@ export function StoryTray() {
role="list"
aria-label="Stories"
>
{/* Add story item */}
{/* Add story item — wrapper matches PawRing container height so circles align */}
<div className="flex flex-col items-center gap-1 shrink-0" role="listitem">
<button
className="flex items-center justify-center rounded-full bg-orange-500 hover:bg-orange-600 transition-colors"
style={{ width: TRAY_AVATAR_SIZE, height: TRAY_AVATAR_SIZE }}
onClick={() => setAddStoryOpen(true)}
aria-label="Add story"
<div
className="flex items-center justify-center"
style={{ width: TRAY_ITEM_SIZE, height: TRAY_ITEM_SIZE }}
>
<PlusCircle className="h-7 w-7 text-white" aria-hidden="true" />
</button>
<button
className="flex items-center justify-center rounded-full bg-orange-500 hover:bg-orange-600 transition-colors"
style={{ width: TRAY_AVATAR_SIZE, height: TRAY_AVATAR_SIZE }}
onClick={() => setAddStoryOpen(true)}
aria-label="Add story"
>
<PlusCircle className="h-7 w-7 text-white" aria-hidden="true" />
</button>
</div>
<span className="text-xs text-muted-foreground truncate max-w-[56px]">
Add story
</span>