From 5bffc0adac4acd31bc806d63c58676bf3b8b9386 Mon Sep 17 00:00:00 2001
From: Shaig Mahmudov <mahmudovshaig@gmail.com>
Date: Wed, 15 Jul 2026 13:44:08 +0400
Subject: [PATCH 1/2] fix(notification): update notification dropdown

---
 app/site.tsx | 114 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 67 insertions(+), 47 deletions(-)

diff --git a/app/site.tsx b/app/site.tsx
index cd8c681..c0558d2 100644
--- a/app/site.tsx
+++ b/app/site.tsx
@@ -135,63 +135,83 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
           </button>
 
           {/* Notifications Dropdown */}
-          <div style={{ position: 'relative' }}>
+          <div style={{ position: "relative" }}>
             <button
               className="icon-button"
-              onClick={() => { setShowNotifications(!showNotifications); setShowProfile(false); }}
+              onClick={() => {
+                setShowNotifications(
+                  (current) => !current,
+                );
+                setShowProfile(false);
+              }}
               aria-label="Notifications"
+              aria-expanded={showNotifications}
             >
               <Bell size={18} />
+
               {notifications.length > 0 && (
-                <span style={{
-                  position: 'absolute',
-                  top: '-2px',
-                  right: '-2px',
-                  width: '8px',
-                  height: '8px',
-                  background: 'var(--orange)',
-                  borderRadius: '50%'
-                }} />
+                <span
+                  style={{
+                    position: "absolute",
+                    top: "-2px",
+                    right: "-2px",
+                    width: "8px",
+                    height: "8px",
+                    background: "var(--color-coral)",
+                    borderRadius: "50%",
+                  }}
+                />
               )}
             </button>
-              {notificationsPending ? (
-                <div className="notification-item">
-                  Loading notifications...
-                </div>
-              ) : notificationsError ? (
-                <div className="notification-item">
-                  Could not load notifications.
+
+            {showNotifications && (
+              <div className="dropdown-menu notification-dropdown">
+                <div className="dropdown-header">
+                  Notifications
                 </div>
-              ) : notifications.length === 0 ? (
-                <div className="notification-item">
-                  No new notifications
+
+                <div className="max-h-[420px] overflow-y-auto">
+                  {notificationsPending ? (
+                    <div className="notification-item">
+                      Loading notifications...
+                    </div>
+                  ) : notificationsError ? (
+                    <div className="notification-item">
+                      Could not load notifications.
+                    </div>
+                  ) : notifications.length === 0 ? (
+                    <div className="notification-item">
+                      No new notifications
+                    </div>
+                  ) : (
+                    notifications.map((notification) => (
+                      <button
+                        key={notification.id}
+                        type="button"
+                        className="notification-item w-full text-left"
+                        disabled={
+                          markNotificationAsRead.isPending
+                        }
+                        onClick={() =>
+                          void handleNotificationClick(
+                            notification,
+                          )
+                        }
+                      >
+                        <strong className="mb-1 block text-sm text-[var(--color-ink)]">
+                          {notification.title ??
+                            "Notification"}
+                        </strong>
+
+                        <p className="m-0 text-xs leading-relaxed text-[var(--muted)]">
+                          {notification.message}
+                        </p>
+                      </button>
+                    ))
+                  )}
                 </div>
-              ) : (
-                notifications.map((notification) => (
-                  <button
-                    key={notification.id}
-                    type="button"
-                    className="notification-item w-full text-left"
-                    disabled={
-                      markNotificationAsRead.isPending
-                    }
-                    onClick={() =>
-                      void handleNotificationClick(
-                        notification,
-                      )
-                    }
-                  >
-                    <strong className="mb-1 block text-sm">
-                      {notification.title ??
-                        "Notification"}
-                    </strong>
-
-                    <p className="text-xs text-[var(--muted)]">
-                      {notification.message}
-                    </p>
-                  </button>
-                ))
-              )}
+              </div>
+            )}
           </div>
 
           {/* Profile Dropdown */}

From 7d0e65e9aa780f19ee97c77f4ae379e33fc8d530 Mon Sep 17 00:00:00 2001
From: Shaig Mahmudov <mahmudovshaig@gmail.com>
Date: Wed, 15 Jul 2026 13:44:25 +0400
Subject: [PATCH 2/2] style(notification): update notification dropdown style

---
 app/globals.css | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/app/globals.css b/app/globals.css
index f7d021f..3b38705 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1082,7 +1082,26 @@ button:disabled {
 }
 
 .notification-dropdown {
-  width: 320px;
+  width: min(360px, calc(100vw - 32px));
+  max-height: min(480px, calc(100vh - 110px));
+  overflow: hidden;
+}
+
+.notification-dropdown .notification-item:last-child {
+  border-bottom: 0;
+}
+
+.notification-item {
+  background: transparent;
+}
+
+button.notification-item:hover {
+  background:
+    color-mix(
+      in srgb,
+      var(--color-ink) 7%,
+      transparent
+    );
 }
 
 .notification-item {