From dc8c10e531712c81db02518ff1e308173f01976a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 23 Feb 2026 09:34:08 +0200
Subject: [PATCH] ui/grid view card: refactor CSS

---
 .../collections/legacy/ListOrGridView.css     | 69 ++++++-------------
 1 file changed, 22 insertions(+), 47 deletions(-)

diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index c0c85a8cd7..9f7075df3b 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -7,6 +7,12 @@
         height: 100%;
         overflow: auto;
     }
+
+    &.grid-view .note-list-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
 }
 
 /* #region List view / Grid view common styles */
@@ -60,6 +66,7 @@
     }
 
     .note-path {
+        opacity: 0.5;
         margin-left: 0;
         font-size: .85em;
         line-height: .85em;
@@ -134,6 +141,10 @@
     }
 }
 
+.note-content-preview:has(.note-book-content:empty) {
+    display: none;
+}
+
 /* #endregion */
 
 /* #region List view */
@@ -159,12 +170,6 @@
         color: var(--note-list-view-icon-color);
     }
 
-    .note-path {
-        margin-left: 0.5em;
-        vertical-align: middle;
-        opacity: 0.5;
-    }
-
     .note-list-attributes {
         flex-grow: 1;
         margin-inline-start: 1em;
@@ -191,7 +196,6 @@
     }
 }
 
-
 /* Note content preview */
 .nested-note-list .note-book-content {
     outline: 1px solid var(--note-list-view-content-background);
@@ -239,10 +243,6 @@
     }
 }
 
-.note-content-preview:has(.note-book-content:empty) {
-    display: none;
-}
-
 /* #endregion */
 
 /* #region Grid view */
@@ -255,10 +255,16 @@
     flex-direction: column;
     flex-shrink: 0;
     flex-grow: 1;
+    flex-basis: 300px;
+    max-height: 300px;
     padding: 0;
     overflow: hidden;
     user-select: none;
 
+    body.mobile & {
+        flex-basis: 150px;
+    }
+
     &:hover {
         background-color: var(--card-background-hover-color);
         filter: contrast(105%);
@@ -307,6 +313,11 @@
             padding: 0;
         }
 
+        img {
+            max-height: 220px;
+            object-fit: contain;
+        }
+
         .file-footer {
             display: flex;
             gap: 8px;
@@ -329,42 +340,6 @@
     }
 }
 
-.note-list.grid-view .note-list-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-.note-list.grid-view .note-book-card {
-    flex-basis: 300px;
-    border: 1px solid transparent;
-}
-
-body.mobile .note-list.grid-view .note-book-card {
-    flex-basis: 150px;
-}
-
-.note-list.grid-view .note-book-card {
-    max-height: 300px;
-}
-
-.note-list.grid-view .note-book-card img {
-    max-height: 220px;
-    object-fit: contain;
-}
-
-.note-list.grid-view .note-book-card:hover {
-    cursor: pointer;
-    border: 1px solid var(--main-border-color);
-    background: var(--more-accented-background-color);
-}
-
-.note-list.grid-view .note-path {
-    margin-left: 0.5em;
-    vertical-align: middle;
-    opacity: 0.5;
-}
-
 .note-book-card .note-book-content {
     padding: 0;
     font-size: 0.8rem;