From b3c397e8470059b49c2ceb5ca586c58bb00f707c Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 25 Feb 2026 09:40:05 +0200 Subject: [PATCH 1/5] 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("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 From 2049c49fdbe7997d1e4262554f196af85df93ba8 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 25 Feb 2026 10:58:38 +0200 Subject: [PATCH 2/5] ui/grid view: horizontally scroll tables --- .../collections/legacy/ListOrGridView.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css index 5ccb1947c0..30a7a949f1 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css @@ -374,6 +374,22 @@ width: 25%; } + .ck-content .table { + display: block; + overflow-y: scroll; + + table { + width: max-content; + } + + figcaption { + display: block; + position: sticky; + left: 0; + width: 100%; + } + } + .rendered-content, .rendered-content.text-with-ellipsis { padding: .5rem 1rem 1rem 1rem; From 896d50b1f856464850898e9f7f9785d9e002a467 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 25 Feb 2026 11:01:45 +0200 Subject: [PATCH 3/5] ui/grid view: hide the scrollbar of tables --- apps/client/src/widgets/collections/legacy/ListOrGridView.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css index 30a7a949f1..0b166fb4b3 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css @@ -377,6 +377,8 @@ .ck-content .table { display: block; overflow-y: scroll; + --scrollbar-thickness: 0; + scrollbar-width: none; table { width: max-content; From 6759fef827197e46330075d3fcddb891bd576374 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 25 Feb 2026 11:04:26 +0200 Subject: [PATCH 4/5] ui/grid view/tables: tweak --- apps/client/src/widgets/collections/legacy/ListOrGridView.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css index 0b166fb4b3..8341644025 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css @@ -375,7 +375,8 @@ } .ck-content .table { - display: block; + display: flex; + flex-direction: column-reverse; overflow-y: scroll; --scrollbar-thickness: 0; scrollbar-width: none; From b223b931ab511201408dbd9ca599250af1f67f95 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 25 Feb 2026 11:35:39 +0200 Subject: [PATCH 5/5] ui/grid view/tables: fix scroll direction --- apps/client/src/widgets/collections/legacy/ListOrGridView.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css index 8341644025..10daa7e722 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css @@ -377,12 +377,13 @@ .ck-content .table { display: flex; flex-direction: column-reverse; - overflow-y: scroll; + overflow-x: scroll; --scrollbar-thickness: 0; scrollbar-width: none; table { width: max-content; + table-layout: auto; } figcaption {