From 987b0aedfaedfc821a8a2bbcb78128ff2ac0f72c Mon Sep 17 00:00:00 2001
From: Hardik <shardik99@gmail.com>
Date: Wed, 27 May 2026 03:32:37 +0530
Subject: [PATCH] fix(mobile): prevent notification dropdown overflow on small
 screens

The dropdown was w-96 (384 px) anchored right-0 to the bell button.
On phones the bell sits left of the logout icon so the panel bled off
the left viewport edge. Changed to w-80/sm:w-96 with a 100vw safety cap.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 App/components/layout/notification-bell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/App/components/layout/notification-bell.tsx b/App/components/layout/notification-bell.tsx
index 75a54f5..a037463 100644
--- a/App/components/layout/notification-bell.tsx
+++ b/App/components/layout/notification-bell.tsx
@@ -114,7 +114,7 @@ export function NotificationBell({ initialUnreadCount, initialNotifications }: P
 
       {/* Dropdown panel */}
       {open && (
-        <div className="absolute right-0 top-full mt-2 w-96 rounded-xl border border-neutral-200 bg-white shadow-xl z-50 overflow-hidden">
+        <div className="absolute right-0 top-full mt-2 w-80 sm:w-96 max-w-[calc(100vw-1rem)] rounded-xl border border-neutral-200 bg-white shadow-xl z-50 overflow-hidden">
           {/* Header */}
           <div className="flex items-center justify-between border-b border-neutral-100 px-4 py-3">
             <h3 className="text-sm font-semibold text-neutral-900">Notifications</h3>