refined DreamCardCompact layout by restructuring user display, simplifying spacing, and improving alignment for better visual balance

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
2025-07-12 12:48:29 +02:00
parent d107630ae4
commit 5045a342b5

View File

@@ -22,9 +22,9 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.2)',
border: '1px solid rgba(166, 77, 255, 0.1)'
}}>
<div className="flex items-center justify-between mb-1">
<div className="flex flex-col mb-1">
{showUser && user && (
<div className="pl-2" style={{width: '120px', minWidth: '120px'}}>
<div className="flex justify-center mb-2">
<div className="flex items-center">
<div
className="w-8 h-8 rounded-full mr-2 flex items-center justify-center overflow-hidden border-2"
@@ -46,14 +46,12 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
</div>
</div>
)}
<div className="flex-1 text-center">
<div className="text-center">
<h4 className="font-medium dream-title text-xs leading-tight">{dream.title}</h4>
<p className="text-xs text-[var(--text-muted)] mt-0.5 opacity-80">
{formatDateSimple(dream.date)}
</p>
</div>
{/* Add an empty div to balance the layout when user is shown */}
{showUser && user && <div className="invisible" style={{width: '120px', minWidth: '120px'}}></div>}
</div>
</div>
</NavLink>