feat: redesign medium-sized bookmark cards with left-side thumbnails

- Replace full-width hero images with compact left-side thumbnails
- Add card-layout flex container for thumbnail + content arrangement
- Implement 80px square thumbnails with hover scale effects
- Update responsive design for smaller screens (60px tablet, 50px mobile)
- Maintain content truncation and reading progress indicators
- Improve space efficiency while preserving visual appeal

src/components/BookmarkViews/CardView.tsx

@@ -116,20 +116,21 @@ export const CardView: React.FC<CardViewProps> = ({
       tabIndex={0}
       onKeyDown={handleKeyDown}
     >
-      {(cachedImage || firstUrl) && (
-        <div 
-          className="card-hero-image"
-          style={cachedImage ? { backgroundImage: `url(${cachedImage})` } : undefined}
-          onClick={() => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)}
-        >
-          {!cachedImage && firstUrl && (
-            <div className="preview-placeholder">
-              <FontAwesomeIcon icon={contentTypeIcon} />
-            </div>
-          )}
-        </div>
-      )}
-      <div className="card-content">
+      <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>
+            )}
+          </div>
+        )}
+        <div className="card-content">
         <div className="bookmark-header">
           <span className="bookmark-type">
             <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
@@ -234,6 +235,7 @@ export const CardView: React.FC<CardViewProps> = ({
           </div>
           {/* CTA removed */}
         </div>
+        </div>
       </div>
     </div>
   )

src/styles/components/cards.css

@@ -94,36 +94,46 @@
   transform: translateY(-2px);
 }
 
-.card-hero-image {
-  width: 100%;
-  height: 160px;
+.card-layout {
+  display: flex;
+  gap: 1rem;
+  padding: 1.25rem;
+  align-items: flex-start;
+}
+
+.card-thumbnail {
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
   background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-subtle) 50%, var(--color-bg-elevated) 100%);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
-  border-bottom: 1px solid var(--color-border);
   position: relative;
+  overflow: hidden;
 }
 
-.card-hero-image:hover {
+.card-thumbnail:hover {
   opacity: 0.9;
+  transform: scale(1.05);
 }
 
-.card-hero-image::after {
+.card-thumbnail::after {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.2) 100%);
+  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.1) 100%);
   pointer-events: none;
 }
 
-.card-hero-image .preview-placeholder {
-  font-size: 2.5rem;
+.card-thumbnail .thumbnail-placeholder {
+  font-size: 1.5rem;
   color: var(--color-border-subtle);
   opacity: 0.6;
   display: flex;
@@ -134,11 +144,12 @@
 }
 
 .card-content {
-  padding: 1.25rem;
+  padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   flex: 1;
+  min-width: 0;
 }
 
 .card-content .bookmark-header {
@@ -238,12 +249,17 @@
     border-radius: 8px;
   }
   
-  .card-hero-image {
-    height: 140px;
+  .card-layout {
+    padding: 1rem;
+    gap: 0.75rem;
+  }
+  
+  .card-thumbnail {
+    width: 60px;
+    height: 60px;
   }
   
   .card-content {
-    padding: 1rem;
     gap: 0.5rem;
   }
   
@@ -258,12 +274,18 @@
 }
 
 @media (max-width: 480px) {
-  .card-hero-image {
-    height: 120px;
+  .card-layout {
+    padding: 0.75rem;
+    gap: 0.5rem;
   }
   
-  .card-content {
-    padding: 0.75rem;
+  .card-thumbnail {
+    width: 50px;
+    height: 50px;
+  }
+  
+  .card-thumbnail .thumbnail-placeholder {
+    font-size: 1.2rem;
   }
   
   .card-content .bookmark-content {