From 4ea5ef925fdd2b9c50c448dfdd5a02bab0bc6696 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 19 Mar 2025 16:02:45 -0300
Subject: [PATCH] feat: make notifications header sticky (#17005)

When having a bunch of notifications and the user is scrolling down the
content it is helpful to keep the header visible so the user can easily
mark all of them as read if they want to.
---
 .../NotificationsInbox/InboxPopover.stories.tsx          | 9 +--------
 .../notifications/NotificationsInbox/InboxPopover.tsx    | 7 ++++++-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/site/src/modules/notifications/NotificationsInbox/InboxPopover.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxPopover.stories.tsx
index 0e40b25f0f..af474966e7 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxPopover.stories.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxPopover.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
 import { MockNotifications } from "testHelpers/entities";
 import { InboxPopover } from "./InboxPopover";
 
@@ -30,13 +30,6 @@ export const Default: Story = {
 	},
 };
 
-export const Scrollable: Story = {
-	args: {
-		unreadCount: 2,
-		notifications: MockNotifications,
-	},
-};
-
 export const Loading: Story = {
 	args: {
 		unreadCount: 0,
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx b/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
index e487d4303f..7651a83ebe 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
@@ -47,7 +47,12 @@ export const InboxPopover: FC<InboxPopoverProps> = ({
 				 * https://github.com/shadcn-ui/ui/issues/542#issuecomment-2339361283
 				 */}
 				<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(var(--radix-popover-content-available-height)-24px)]">
-					<div className="flex items-center justify-between p-3 border-0 border-b border-solid border-border">
+					<div
+						className={cn([
+							"flex items-center justify-between p-3 border-0 border-b border-solid border-border",
+							"sticky top-0 bg-surface-primary z-10 rounded-t",
+						])}
+					>
 						<div className="flex items-center gap-2">
 							<span className="text-xl font-semibold">Inbox</span>
 							{unreadCount > 0 && <UnreadBadge count={unreadCount} />}