shad0w/pelagia-portal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(mobile): prevent notification dropdown overflow on small screens

Browse source 
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>
This commit is contained in:
Hardik 2026-05-27 03:32:37 +05:30
parent 91f369da9e
commit 987b0aedfa
1 changed files with 1 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
App/components/layout/notification-bell.tsx
View file

@ -114,7 +114,7 @@ export function NotificationBell({ initialUnreadCount, initialNotifications }: P
{/* Dropdown panel */} {/* Dropdown panel */}
{open && ( {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 */} {/* Header */}
<div className="flex items-center justify-between border-b border-neutral-100 px-4 py-3"> <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> <h3 className="text-sm font-semibold text-neutral-900">Notifications</h3>