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>
   )