From 6d469fd52ec900d2c7ed190730c078d875daa3b6 Mon Sep 17 00:00:00 2001
From: cyph3rasi <cyph3rasi@gmail.com>
Date: Wed, 15 Jul 2026 10:01:47 -0700
Subject: [PATCH] Make notification post previews compact and visually balanced

Hop-State: A_06FPDEHMF08FD1WFT8EABK0
Hop-Proposal: R_06FPDEH4YZGSZFY42E0B818
Hop-Task: T_06FPDE8W8A645NYJXGJSC20
Hop-Attempt: AT_06FPDE8W89FZY4QDYJ5N6AR
---
 src/app/notifications/page.tsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/app/notifications/page.tsx b/src/app/notifications/page.tsx
index 99483a2..d88ac6c 100644
--- a/src/app/notifications/page.tsx
+++ b/src/app/notifications/page.tsx
@@ -255,19 +255,23 @@ function NotificationItem({
                     <Link
                         href={`/posts/${notification.post.id}`}
                         style={{
-                            display: 'flex',
+                            display: 'inline-flex',
                             alignItems: 'center',
-                            gap: '10px',
-                            marginTop: '8px',
-                            padding: '8px',
-                            background: 'var(--background-secondary)',
-                            borderRadius: '8px',
+                            gap: '8px',
+                            width: 'fit-content',
+                            maxWidth: '100%',
+                            marginTop: '10px',
+                            padding: '5px 10px 5px 5px',
+                            background: 'var(--background)',
+                            border: '1px solid var(--border)',
+                            borderRadius: '10px',
                             color: 'var(--foreground-secondary)',
-                            fontSize: '14px',
+                            fontSize: '13px',
+                            lineHeight: 1.3,
                             textDecoration: 'none',
                             overflow: 'hidden',
                         }}
-                        aria-label={`View liked post: ${postPreview?.label || 'View post'}`}
+                        aria-label={`View post: ${postPreview?.label || 'View post'}`}
                     >
                         {postPreview?.imageUrl && (
                             // eslint-disable-next-line @next/next/no-img-element
@@ -275,9 +279,9 @@ function NotificationItem({
                                 src={postPreview.imageUrl}
                                 alt={postPreview.imageAlt}
                                 style={{
-                                    width: 52,
-                                    height: 52,
-                                    borderRadius: '6px',
+                                    width: 48,
+                                    height: 48,
+                                    borderRadius: '7px',
                                     objectFit: 'cover',
                                     flexShrink: 0,
                                 }}
@@ -285,6 +289,7 @@ function NotificationItem({
                         )}
                         <span style={{
                             minWidth: 0,
+                            maxWidth: '320px',
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',