refactor: make compact list view even more compact

- Move all elements to a single horizontal line
- Reduce text preview from 100 to 60 characters
- Decrease padding and font sizes
- Fix row height to 28px for consistent spacing
- Improve text truncation with ellipsis

src/components/BookmarkItem.tsx

@@ -81,7 +81,7 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
   if (viewMode === 'compact') {
     return (
       <div key={`${bookmark.id}-${index}`} className={`individual-bookmark compact ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
-        <div className="compact-header">
+        <div className="compact-row">
           <span className="bookmark-type-compact">
             {bookmark.isPrivate ? (
               <>
@@ -92,25 +92,21 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
               <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
             )}
           </span>
-          <div className="compact-content">
-            {bookmark.content && (
-              <div className="compact-text">
-                <ContentWithResolvedProfiles content={bookmark.content.slice(0, 100) + (bookmark.content.length > 100 ? '…' : '')} />
-              </div>
-            )}
-            <div className="compact-meta">
-              <span className="bookmark-date-compact">{formatDate(bookmark.created_at)}</span>
-              {hasUrls && (
-                <button
-                  className="compact-read-btn"
-                  onClick={(e) => { e.preventDefault(); onSelectUrl?.(extractedUrls[0]) }}
-                  title={firstUrlClassification?.buttonText}
-                >
-                  <FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
-                </button>
-              )}
+          {bookmark.content && (
+            <div className="compact-text">
+              <ContentWithResolvedProfiles content={bookmark.content.slice(0, 60) + (bookmark.content.length > 60 ? '…' : '')} />
             </div>
-          </div>
+          )}
+          <span className="bookmark-date-compact">{formatDate(bookmark.created_at)}</span>
+          {hasUrls && (
+            <button
+              className="compact-read-btn"
+              onClick={(e) => { e.preventDefault(); onSelectUrl?.(extractedUrls[0]) }}
+              title={firstUrlClassification?.buttonText}
+            >
+              <FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
+            </button>
+          )}
         </div>
       </div>
     )

src/index.css

@@ -623,7 +623,7 @@ body {
 
 /* Compact view styles */
 .individual-bookmark.compact {
-  padding: 0.5rem 0.75rem;
+  padding: 0.4rem 0.75rem;
   background: transparent;
   border-bottom: 1px solid #333;
   border-radius: 0;
@@ -636,10 +636,11 @@ body {
   box-shadow: none;
 }
 
-.compact-header {
+.compact-row {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 0.75rem;
+  height: 28px;
 }
 
 .bookmark-type-compact {
@@ -647,51 +648,42 @@ body {
   align-items: center;
   gap: 0.25rem;
   color: #646cff;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   flex-shrink: 0;
-  padding-top: 0.25rem;
-}
-
-.compact-content {
-  flex: 1;
-  min-width: 0;
 }
 
 .compact-text {
+  flex: 1;
+  min-width: 0;
   color: #ccc;
-  font-size: 0.9rem;
-  line-height: 1.4;
-  margin-bottom: 0.25rem;
+  font-size: 0.85rem;
+  line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.compact-meta {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  justify-content: space-between;
-}
-
 .bookmark-date-compact {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   color: #666;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .compact-read-btn {
   background: #28a745;
   color: white;
   border: none;
-  padding: 0.25rem 0.5rem;
+  padding: 0;
   border-radius: 4px;
   cursor: pointer;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 28px;
-  height: 24px;
+  width: 26px;
+  height: 22px;
+  flex-shrink: 0;
   transition: background-color 0.2s ease;
 }