fix(component): optimize stack notification with different height (#8700)

![CleanShot 2024-11-05 at 09.10.54.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/ed74d2ad-3044-4df3-9207-69a891435ea3.gif)

packages/frontend/component/src/ui/notification/desktop/notification-center.tsx

@@ -4,6 +4,14 @@ import { type CSSProperties, useMemo } from 'react';
 import { Toaster } from 'sonner';
 
 import type { NotificationCenterProps } from '../types';
+import { cardWrapper } from './styles.css';
+
+const toastOptions = {
+  style: {
+    width: '100%',
+  },
+  className: cardWrapper,
+};
 
 export function DesktopNotificationCenter({
   width = 380,
@@ -21,15 +29,6 @@ export function DesktopNotificationCenter({
     } satisfies CSSProperties;
   }, [width]);
 
-  const toastOptions = useMemo(
-    () => ({
-      style: {
-        width: '100%',
-      },
-    }),
-    []
-  );
-
   return (
     <Toaster
       className="affine-notification-center"

packages/frontend/component/src/ui/notification/desktop/styles.css.ts

@@ -8,11 +8,16 @@ export const actionTextColor = createVar();
 export const iconColor = createVar();
 export const closeIconColor = createVar();
 
-export const card = style({
+export const cardWrapper = style({
   borderRadius: 8,
+  boxShadow: cssVar('shadow1'),
+  overflow: 'hidden',
+});
+
+export const card = style({
+  borderRadius: 'inherit',
   borderWidth: 1,
   borderStyle: 'solid',
-  boxShadow: cssVar('shadow1'),
   backgroundColor: cardColor,
   borderColor: cardBorderColor,
   color: cardForeground,

packages/frontend/component/src/ui/notification/notification-center.stories.tsx

@@ -241,3 +241,80 @@ export const ZIndexWithModal: StoryFn = () => {
     </Root>
   );
 };
+
+export const DifferentSize: StoryFn = () => {
+  const openTiny = () => {
+    notify({ title: 'Tiny' }, { duration: 60000 });
+  };
+  const openNormal = () =>
+    notify(
+      {
+        title: 'Normal Size',
+        message: 'With basic title and one line message',
+      },
+      { duration: 60000 }
+    );
+
+  const openLarge = () => {
+    notify(
+      {
+        title: 'Large Size',
+        message: (
+          <div>
+            <h1>Large Size</h1>
+            <p>
+              With long title and long message to test the size of the
+              notification; The content may be multiline and the card will be
+              larger.
+            </p>
+          </div>
+        ),
+      },
+      { duration: 60000 }
+    );
+  };
+  const openWithThumb = () => {
+    notify(
+      {
+        thumb: (
+          <div
+            style={{
+              height: 100,
+              background: 'rgba(100,100,100,.05)',
+              lineHeight: '100px',
+              textAlign: 'center',
+              borderTopLeftRadius: 'inherit',
+              borderTopRightRadius: 'inherit',
+            }}
+          >
+            Hack thumb
+          </div>
+        ),
+        title: 'Card with thumb',
+        message: 'With basic title and one line message',
+      },
+      { duration: 60000 }
+    );
+  };
+  const openWithFooter = () => {
+    notify(
+      {
+        title: 'With footer',
+        message: 'With basic title and one line message',
+        footer: (
+          <Button onClick={() => console.log('clicked')}>Click me</Button>
+        ),
+      },
+      { duration: 60000 }
+    );
+  };
+  return (
+    <Root style={{ display: 'flex', gap: 8 }}>
+      <Button onClick={openTiny}>Open Tiny</Button>
+      <Button onClick={openNormal}>Open Normal</Button>
+      <Button onClick={openLarge}>Open Large</Button>
+      <Button onClick={openWithThumb}>Open with thumb</Button>
+      <Button onClick={openWithFooter}>Open with footer</Button>
+    </Root>
+  );
+};