From c8cd1e6e666109a470d56b6dee0e47d1a357d15b Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 01:50:46 +0200
Subject: [PATCH] style: make bookmark cards significantly more compact

- Reduce card content gap from 0.5rem to 0.25rem (50% reduction)
- Reduce bookmark title margin-bottom from 0.5rem to 0.25rem (50% reduction)
- Reduce bookmark footer padding-top from 0.5rem to 0.25rem (50% reduction)
- Reduce reading progress separator margin from 0.5rem to 0.25rem (50% reduction)
- Update ReadingProgressBar component margins to 0.25rem
- Update responsive breakpoints for consistent compact spacing
- Achieve much tighter vertical layout with minimal wasted space
---
 src/components/BookmarkViews/CardView.tsx |  4 ++--
 src/styles/components/cards.css           | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
index 1762e40d..39a0ca12 100644
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -150,8 +150,8 @@ export const CardView: React.FC<CardViewProps> = ({
         <ReadingProgressBar 
           readingProgress={readingProgress}
           height={1}
-          marginTop="0.5rem"
-          marginBottom="0.5rem"
+          marginTop="0.25rem"
+          marginBottom="0.25rem"
         />
         
         <div className="bookmark-footer">
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
index 11594b7c..01d9deb9 100644
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -160,7 +160,7 @@
 .card-content {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
   flex: 1;
 }
 
@@ -172,7 +172,7 @@
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--color-text);
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 0.25rem 0;
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -200,7 +200,7 @@
 
 .card-content .bookmark-footer {
   margin-top: auto;
-  padding-top: 0.5rem;
+  padding-top: 0.25rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -238,7 +238,7 @@
   background: var(--color-border);
   border-radius: 0.5px;
   overflow: hidden;
-  margin: 0.5rem 0;
+  margin: 0.25rem 0;
   position: relative;
 }
 
@@ -314,7 +314,7 @@
   
   .card-content .bookmark-title {
     font-size: 1rem;
-    margin-bottom: 0.375rem;
+    margin-bottom: 0.25rem;
   }
   
   .card-content .bookmark-content {
@@ -323,7 +323,7 @@
   }
   
   .card-content .bookmark-footer {
-    padding-top: 0.375rem;
+    padding-top: 0.25rem;
   }
 }
 
@@ -348,7 +348,7 @@
   
   .card-content .bookmark-title {
     font-size: 0.9rem;
-    margin-bottom: 0.375rem;
+    margin-bottom: 0.25rem;
   }
   
   .card-content .bookmark-content {