chore: add gradient block to compact mode

usememos · Sep 22, 2024 · ea88133 · ea88133
1 parent 7817947
commit ea88133
Showing 1 changed file with 4 additions and 1 deletion.
diff --git 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">