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:
1 parent
4b2760a08d
commit
7fafc6d17f
1 file changed
+15
-8
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user