ui/grid view/tables: fix scroll direction

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;
@@ -366,6 +374,26 @@
         width: 25%;
     }
 
+    .ck-content .table {
+        display: flex;
+        flex-direction: column-reverse;
+        overflow-x: scroll;
+        --scrollbar-thickness: 0;
+        scrollbar-width: none;
+        
+        table {
+            width: max-content;
+            table-layout: auto;
+        }
+
+        figcaption {
+            display: block;
+            position: sticky;
+            left: 0;
+            width: 100%;
+        }
+    }
+
     .rendered-content,
     .rendered-content.text-with-ellipsis {
         padding: .5rem 1rem 1rem 1rem;

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);
+    }
 }