From 618d0e7ae307a8a923cf3ed3012dcf4d9d684068 Mon Sep 17 00:00:00 2001
From: Nemenwq <chloemikka@gmail.com>
Date: Tue, 30 Jun 2026 08:32:17 +0100
Subject: [PATCH] fix: improve notification list responsiveness for mobile
 devices

---
 src/components/notifications/NotificationList.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/notifications/NotificationList.tsx b/src/components/notifications/NotificationList.tsx
index c77c5746..d3f8b9d4 100644
--- a/src/components/notifications/NotificationList.tsx
+++ b/src/components/notifications/NotificationList.tsx
@@ -124,9 +124,9 @@ export function NotificationList({
   return (
     <div className="space-y-6">
       {/* Header with stats */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
         <div>
-          <h1 className="text-2xl font-bold text-white mb-1">Notifications</h1>
+          <h1 className="text-xl sm:text-2xl font-bold text-white mb-1">Notifications</h1>
           <p className="text-white/60 text-sm">
             {unreadCount > 0 ? `${unreadCount} unread` : 'All caught up'}
           </p>
@@ -192,7 +192,7 @@ export function NotificationList({
               key={notification.id}
               onClick={() => handleNotificationClick(notification)}
               className={`
-                relative bg-[#0a0a0a] border rounded-xl p-5 cursor-pointer transition-all
+                relative bg-[#0a0a0a] border rounded-xl p-4 sm:p-5 cursor-pointer transition-all
                 ${
                   notification.read
                     ? 'border-[#222] opacity-70 hover:opacity-100'