diff --git a/src/atoms/owner.ts b/src/atoms/owner.ts
index 08f176a74d..0e55dde38a 100644
--- a/src/atoms/owner.ts
+++ b/src/atoms/owner.ts
@@ -55,7 +55,6 @@ export const login = async (username?: string, password?: string) => {
   }
 
   await refreshToken()
-  toast(`欢迎回来，${jotaiStore.get(ownerAtom)?.name}`, 'success')
 
   return true
 }
diff --git a/src/components/modules/toc/TocFAB.tsx b/src/components/modules/toc/TocFAB.tsx
index 7f6a94d6af..87302685f0 100644
--- a/src/components/modules/toc/TocFAB.tsx
+++ b/src/components/modules/toc/TocFAB.tsx
@@ -34,7 +34,7 @@ export const TocFAB = () => {
       content: () => (
         <TocTree
           $headings={$headings!}
-          className="space-y-3 [&>li]:py-1"
+          className="max-h-full space-y-3 overflow-y-auto [&>li]:py-1"
           onItemClick={() => {
             dispose()
           }}
diff --git a/src/components/ui/sheet/Sheet.tsx b/src/components/ui/sheet/Sheet.tsx
index 1f7735a43a..0d93064532 100644
--- a/src/components/ui/sheet/Sheet.tsx
+++ b/src/components/ui/sheet/Sheet.tsx
@@ -87,7 +87,7 @@ export const PresentSheet: FC<PropsWithChildren<PresentSheetProps>> = (
           style={{
             zIndex: contentZIndex,
           }}
-          className="fixed inset-x-0 bottom-0 mt-24 flex max-h-[95vh] flex-col rounded-t-[10px] bg-base-100 p-4"
+          className="fixed inset-x-0 bottom-0 flex max-h-[calc(100svh-5rem)] flex-col rounded-t-[10px] bg-base-100 p-4"
         >
           {dismissible && (
             <div className="mx-auto mb-8 h-1.5 w-12 shrink-0 rounded-full bg-zinc-300 dark:bg-neutral-800" />
diff --git a/src/styles/index.css b/src/styles/index.css
index 8b48100f47..0c456e25d3 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -9,3 +9,4 @@
 
 @import './theme.css';
 @import './webfont.css';
+@import './mask.css';
diff --git a/src/styles/mask.css b/src/styles/mask.css
new file mode 100644
index 0000000000..6240ee8a47
--- /dev/null
+++ b/src/styles/mask.css
@@ -0,0 +1,54 @@
+.mask-both {
+  mask-image: linear-gradient(
+    rgba(255, 255, 255, 0) 0%,
+    rgb(255, 255, 255) 20px,
+    rgb(255, 255, 255) calc(100% - 20px),
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+.mask-both-lg {
+  mask-image: linear-gradient(
+    rgba(255, 255, 255, 0) 0%,
+    rgb(255, 255, 255) 50px,
+    rgb(255, 255, 255) calc(100% - 50px),
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.mask-b {
+  mask-image: linear-gradient(
+    rgb(255, 255, 255) calc(100% - 20px),
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.mask-b-lg {
+  mask-image: linear-gradient(
+    rgb(255, 255, 255) calc(100% - 50px),
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.mask-t {
+  mask-image: linear-gradient(
+    rgba(255, 255, 255, 0) 0%,
+    rgb(255, 255, 255) 20px
+  );
+}
+
+.mask-t-lg {
+  mask-image: linear-gradient(
+    rgba(255, 255, 255, 0) 0%,
+    rgb(255, 255, 255) 50px
+  );
+}
+
+.mask-horizontal {
+  mask-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 1) 14%,
+    rgba(255, 255, 255, 1) 86%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}