From ea881338a9fc6740580ab794c84973872e27bf1c Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sun, 22 Sep 2024 21:15:46 +0800
Subject: [PATCH] chore: add gradient block to compact mode

---
 web/src/components/MemoContent/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx
index 0519db11..201a8574 100644
--- a/web/src/components/MemoContent/index.tsx
+++ b/web/src/components/MemoContent/index.tsx
@@ -79,7 +79,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
         <div
           ref={memoContentContainerRef}
           className={clsx(
-            "w-full max-w-full word-break text-base leading-snug space-y-2 whitespace-pre-wrap",
+            "relative w-full max-w-full word-break text-base leading-snug space-y-2 whitespace-pre-wrap",
             showCompactMode && "line-clamp-6",
             contentClassName,
           )}
@@ -96,6 +96,9 @@ const MemoContent: React.FC<Props> = (props: Props) => {
             skipNextLineBreakFlag = true;
             return <Renderer key={`${node.type}-${index}`} index={String(index)} node={node} />;
           })}
+          {showCompactMode && (
+            <div className="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-b from-transparent dark:to-zinc-800 to-white pointer-events-none"></div>
+          )}
         </div>
         {showCompactMode && (
           <div className="w-full mt-1">