feat: position bookmark type icon in top-left corner of card

- Move bookmark type icon to top-left corner as overlay
- Add bookmark-type-overlay with absolute positioning
- Style icon with background, border, and shadow for visibility
- Update responsive design for smaller screens
- Remove icon from bookmark header to avoid duplication
- Ensure icon is always visible and accessible
This commit is contained in:
Gigi
2025-10-25 01:36:01 +02:00
parent 9d1d944daf
commit 38f4b69d48
2 changed files with 46 additions and 3 deletions

View File

@@ -117,6 +117,11 @@ export const CardView: React.FC<CardViewProps> = ({
onKeyDown={handleKeyDown}
>
<div className="card-layout">
{/* Bookmark type icon in top-left corner */}
<div className="bookmark-type-overlay">
<FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
</div>
<div className="card-content">
<div className="card-content-header">
{(cachedImage || firstUrl) && (
@@ -134,9 +139,6 @@ export const CardView: React.FC<CardViewProps> = ({
)}
<div className="card-text-content">
<div className="bookmark-header">
<span className="bookmark-type">
<FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
</span>
{getInternalRoute() ? (
<Link