Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit4ea5ef9

Browse files
feat: make notifications header sticky (#17005)
When having a bunch of notifications and the user is scrolling down thecontent it is helpful to keep the header visible so the user can easilymark all of them as read if they want to.
1 parentc88d86b commit4ea5ef9

File tree

2 files changed

+7
-9
lines changed

2 files changed

+7
-9
lines changed

‎site/src/modules/notifications/NotificationsInbox/InboxPopover.stories.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
importtype{Meta,StoryObj}from"@storybook/react";
2-
import{expect,fn,userEvent,within}from"@storybook/test";
2+
import{expect,fn,userEvent,waitFor,within}from"@storybook/test";
33
import{MockNotifications}from"testHelpers/entities";
44
import{InboxPopover}from"./InboxPopover";
55

@@ -30,13 +30,6 @@ export const Default: Story = {
3030
},
3131
};
3232

33-
exportconstScrollable:Story={
34-
args:{
35-
unreadCount:2,
36-
notifications:MockNotifications,
37-
},
38-
};
39-
4033
exportconstLoading:Story={
4134
args:{
4235
unreadCount:0,

‎site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,12 @@ export const InboxPopover: FC<InboxPopoverProps> = ({
4747
* https://github.com/shadcn-ui/ui/issues/542#issuecomment-2339361283
4848
*/}
4949
<ScrollAreaclassName="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(var(--radix-popover-content-available-height)-24px)]">
50-
<divclassName="flex items-center justify-between p-3 border-0 border-b border-solid border-border">
50+
<div
51+
className={cn([
52+
"flex items-center justify-between p-3 border-0 border-b border-solid border-border",
53+
"sticky top-0 bg-surface-primary z-10 rounded-t",
54+
])}
55+
>
5156
<divclassName="flex items-center gap-2">
5257
<spanclassName="text-xl font-semibold">Inbox</span>
5358
{unreadCount>0&&<UnreadBadgecount={unreadCount}/>}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp