feat: make notifications header sticky (#17005)

BrunoQuaresma · web-flow · commit 4ea5ef925fdd · 2025-03-19T16:02:45.000-03:00
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.
diff --git 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
@@ -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} />}
