From 47aa24d0f450fc25e2c16f789da91ad30c27ce64 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 22 Feb 2026 19:43:25 +0200
Subject: [PATCH] ui/list view: use card frame component instead of a custom
 styled element

---
 .../src/widgets/collections/legacy/ListOrGridView.css      | 7 ++-----
 .../src/widgets/collections/legacy/ListOrGridView.tsx      | 6 +++---
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 33fa84e2b5..0e8eb57a4f 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -246,17 +246,14 @@
 
 /* #region Grid view */
 
-.note-book-card {
+.note-list .note-book-card {
     --note-list-horizontal-padding: 22px;
     --note-list-vertical-padding: 15px;
-    
+
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     flex-grow: 1;
-    border: 1px solid var(--card-border-color) !important;
-    border-radius: 12px;
-    background-color: var(--card-background-color, var(--accented-background-color));
     padding: 0;
     overflow: hidden;
     user-select: none;
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index 22ade248d9..fc32be9957 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -1,5 +1,5 @@
 import "./ListOrGridView.css";
-import { Card, CardSection } from "../../react/Card";
+import { Card, CardFrame, CardSection } from "../../react/Card";
 
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 
@@ -160,7 +160,7 @@ function GridNoteCard(props: GridNoteCardProps) {
     const notePath = getNotePath(props.parentNote, props.note);
 
     return (
-        <div className={clsx("note-book-card", "no-tooltip-preview", "block-link", {
+        <CardFrame className={clsx("note-book-card", "no-tooltip-preview", "block-link", {
                 "archived": props.note.isArchived
              })}
              data-href={`#${notePath}`}
@@ -182,7 +182,7 @@ function GridNoteCard(props: GridNoteCardProps) {
                          highlightedTokens={props.highlightedTokens}
                          includeArchivedNotes={props.includeArchived}
             />
-        </div>
+        </CardFrame>
     );
 }