reels

src/constants/reelsFeed.ts

@@ -7,9 +7,19 @@ export const REELS_PAGE_SIZE = 6;
 /** فقط کارت‌های نزدیک پست فعال mount می‌شوند */
 export const REELS_RENDER_WINDOW = 5;
 
-/** کلاس یکسان هر اسلات ریلز — snap + ارتفاع ثابت */
+/** فضای رزروشده‌ی پایینِ هر اسلات برای نوارِ ناوبریِ شناورِ پایینِ صفحه (TabNavigation.tsx)
+ * که برخلافِ اندروید (که تبِ پایین رو کاملاً مخفی می‌کنه)، توی ریلزِ وب همیشه روی صفحه
+ * می‌مونه — پس برخلافِ نسخه‌ی اول (نسبتِ ۹:۱۶ کاملِ letterbox که فضای خالیِ خیلی زیادی
+ * می‌ذاشت)، اینجا فقط دقیقاً به‌اندازه‌ی ارتفاعِ خودِ همون نوار + safe-area رزرو می‌شه،
+ * نه یه نسبتِ ابعادِ ثابت — تا پست مثلِ ریلزِ اندروید تقریباً تمام‌صفحه (edge-to-edge)
+ * بمونه و فقط از زیرِ نوار بیرون نزنه */
+export const REELS_BOTTOM_RESERVED = "calc(96px + env(safe-area-inset-bottom))";
+
+/** کلاس یکسان هر اسلات ریلز — snap + ارتفاع ثابت. خودِ اسلات کامل‌ارتفاعه (برای
+ * فاصله‌گذاریِ درستِ scroll-snap)؛ محتوای واقعی (ReelsPostCard) با REELS_BOTTOM_RESERVED
+ * کوتاه‌تر می‌شه و از بالا (زیرِ status bar) شروع می‌شه، نه وسط‌چین */
 export const REELS_SLOT_CLASS =
-  "reels-snap-slot h-[100dvh] w-full shrink-0 snap-start snap-always";
+  "reels-snap-slot flex h-[100dvh] w-full shrink-0 snap-start snap-always items-start justify-center bg-black pt-[env(safe-area-inset-top)]";
 
 /** پوسته ریلز — هم‌عرض منوبار */
 export const REELS_SHELL_CLASS = "mx-auto h-[100dvh] w-full max-w-xl overflow-hidden";