From e56461cb12746becdc8939bf21d52ded495ea784 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 01:34:40 +0200
Subject: [PATCH] feat: restructure card layout to position author in
 bottom-left corner

- Move thumbnail to be next to text content instead of blocking author position
- Create card-content-header with thumbnail + text-content flex layout
- Position author name in bottom-left corner of card footer
- Update responsive design for new layout structure
- Maintain thumbnail functionality while fixing author positioning
---
 src/components/BookmarkViews/CardView.tsx | 31 +++++++++++++----------
 src/styles/components/cards.css           | 28 +++++++++++++++++---
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
index c9bec96c..f73d8efb 100644
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -117,20 +117,22 @@ export const CardView: React.FC<CardViewProps> = ({
       onKeyDown={handleKeyDown}
     >
       <div className="card-layout">
-        {(cachedImage || firstUrl) && (
-          <div 
-            className="card-thumbnail"
-            style={cachedImage ? { backgroundImage: `url(${cachedImage})` } : undefined}
-            onClick={() => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)}
-          >
-            {!cachedImage && firstUrl && (
-              <div className="thumbnail-placeholder">
-                <FontAwesomeIcon icon={contentTypeIcon} />
+        <div className="card-content">
+          <div className="card-content-header">
+            {(cachedImage || firstUrl) && (
+              <div 
+                className="card-thumbnail"
+                style={cachedImage ? { backgroundImage: `url(${cachedImage})` } : undefined}
+                onClick={() => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)}
+              >
+                {!cachedImage && firstUrl && (
+                  <div className="thumbnail-placeholder">
+                    <FontAwesomeIcon icon={contentTypeIcon} />
+                  </div>
+                )}
               </div>
             )}
-          </div>
-        )}
-        <div className="card-content">
+            <div className="card-text-content">
         <div className="bookmark-header">
           <span className="bookmark-type">
             <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
@@ -213,6 +215,10 @@ export const CardView: React.FC<CardViewProps> = ({
           </div>
         )}
         
+            </div>
+          </div>
+        </div>
+        
         <div className="bookmark-footer">
           <div className="bookmark-meta-minimal">
             <Link
@@ -226,7 +232,6 @@ export const CardView: React.FC<CardViewProps> = ({
           </div>
           {/* CTA removed */}
         </div>
-        </div>
       </div>
     </div>
   )
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
index 295a2a7a..5bcda181 100644
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -96,11 +96,25 @@
 
 .card-layout {
   display: flex;
-  gap: 1rem;
+  flex-direction: column;
   padding: 1.25rem;
+  gap: 0.75rem;
+}
+
+.card-content-header {
+  display: flex;
+  gap: 1rem;
   align-items: flex-start;
 }
 
+.card-text-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
 .card-thumbnail {
   width: 80px;
   height: 80px;
@@ -144,12 +158,10 @@
 }
 
 .card-content {
-  padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   flex: 1;
-  min-width: 0;
 }
 
 .card-content .bookmark-header {
@@ -267,6 +279,10 @@
   
   .card-layout {
     padding: 1rem;
+    gap: 0.5rem;
+  }
+  
+  .card-content-header {
     gap: 0.75rem;
   }
   
@@ -275,7 +291,7 @@
     height: 60px;
   }
   
-  .card-content {
+  .card-text-content {
     gap: 0.5rem;
   }
   
@@ -295,6 +311,10 @@
     gap: 0.5rem;
   }
   
+  .card-content-header {
+    gap: 0.5rem;
+  }
+  
   .card-thumbnail {
     width: 50px;
     height: 50px;