From 7fafc6d17ffdba882370b9515c4ddddb10813de2 Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Sat, 13 Jun 2026 12:44:57 +0200
Subject: [PATCH] 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>
---
 src/components/stories/StoryTray.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/stories/StoryTray.tsx b/src/components/stories/StoryTray.tsx
index 89a1820..7a548e9 100644
--- a/src/components/stories/StoryTray.tsx
+++ b/src/components/stories/StoryTray.tsx
@@ -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>