diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx index e90baf8a..f4d0d289 100644 --- a/src/components/BookmarkItem.tsx +++ b/src/components/BookmarkItem.tsx @@ -169,5 +169,5 @@ export const BookmarkItem: React.FC = ({ bookmark, index, onS return } - return + return } diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx index 687be073..9e3e0c63 100644 --- a/src/components/BookmarkViews/CardView.tsx +++ b/src/components/BookmarkViews/CardView.tsx @@ -22,6 +22,7 @@ interface CardViewProps { handleReadNow: (e: React.MouseEvent) => void articleImage?: string articleSummary?: string + articleTitle?: string contentTypeIcon: IconDefinition readingProgress?: number } @@ -37,6 +38,7 @@ export const CardView: React.FC = ({ handleReadNow, articleImage, articleSummary, + articleTitle, contentTypeIcon, readingProgress }) => { @@ -148,6 +150,13 @@ export const CardView: React.FC = ({ {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)} )} + + {/* Display title for articles */} + {articleTitle && ( +

+ +

+ )} {extractedUrls.length > 0 && (
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css index 8bff8f37..f7ba959f 100644 --- a/src/styles/components/cards.css +++ b/src/styles/components/cards.css @@ -168,6 +168,19 @@ margin-bottom: 0.5rem; } +.card-content .bookmark-title { + font-size: 1.1rem; + font-weight: 600; + color: var(--color-text); + margin: 0 0 0.75rem 0; + line-height: 1.4; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + .card-content .bookmark-content { font-size: 0.9rem; line-height: 1.6; @@ -295,6 +308,11 @@ gap: 0.5rem; } + .card-content .bookmark-title { + font-size: 1rem; + margin-bottom: 0.5rem; + } + .card-content .bookmark-content { font-size: 0.85rem; line-height: 1.5; @@ -324,6 +342,11 @@ font-size: 1.2rem; } + .card-content .bookmark-title { + font-size: 0.9rem; + margin-bottom: 0.5rem; + } + .card-content .bookmark-content { font-size: 0.8rem; }