From b3c397e8470059b49c2ceb5ca586c58bb00f707c Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 25 Feb 2026 09:40:05 +0200
Subject: [PATCH] ui/grid view: fade out overflowing content

---
 .../collections/legacy/ListOrGridView.css     |  8 ++++++++
 .../collections/legacy/ListOrGridView.tsx     | 20 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index bb3a09ecc9..5ccb1947c0 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -355,7 +355,15 @@
 
 .note-book-card .note-book-content {
     padding: 0;
+    flex: 1;
+    overflow: hidden;
     font-size: 0.8rem;
+
+    &.note-book-content-overflowing {
+        mask-image: linear-gradient(to bottom, black calc(100% - 75px), transparent 100%);
+        mask-repeat: no-repeat;
+        mask-size: 100% 100%;
+    }
     
     .ck-content p {
         margin-bottom: 0.5em;
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 1bb7b71d65..238817d978 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -21,6 +21,8 @@ import ActionButton from "../../react/ActionButton";
 import linkContextMenuService from "../../../menus/link_context_menu";
 import { ComponentChildren, TargetedMouseEvent } from "preact";
 
+const contentSizeObserver = new ResizeObserver(onContentResized);
+
 export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
     const expandDepth = useExpansionDepth(note);
     const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
@@ -212,6 +214,17 @@ export function NoteContent({ note, trim, noChildrenList, highlightedTokens, inc
     const [ready, setReady] = useState(false);
     const [noteType, setNoteType] = useState<string>("none");
 
+    useEffect(() => {
+        const contentElement = contentRef.current;
+        if (!contentElement) return;
+
+        contentSizeObserver.observe(contentElement);
+
+        return () => {
+            contentSizeObserver.unobserve(contentElement);
+        }
+    }, []);
+
     useEffect(() => {
         content_renderer.getRenderedContent(note, {
             trim,
@@ -298,4 +311,11 @@ function useExpansionDepth(note: FNote) {
     }
     return parseInt(expandDepth, 10);
 
+}
+
+function onContentResized(entries: ResizeObserverEntry[], observer: ResizeObserver): void {
+    for (const contentElement of entries) {
+        const isOverflowing = ((contentElement.target.scrollHeight > contentElement.target.clientHeight))
+        contentElement.target.classList.toggle("note-book-content-overflowing", isOverflowing);
+    }
 }
\ No newline at end of file