From 5045a342b5800ecf3613b72a7831f2913cd3b37d Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Sat, 12 Jul 2025 12:48:29 +0200
Subject: [PATCH] refined `DreamCardCompact` layout by restructuring user
 display, simplifying spacing, and improving alignment for better visual
 balance

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
---
 src/components/DreamCardCompact.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/DreamCardCompact.tsx b/src/components/DreamCardCompact.tsx
index 3018450..16f16bb 100644
--- a/src/components/DreamCardCompact.tsx
+++ b/src/components/DreamCardCompact.tsx
@@ -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>