GnosysLabs/Synapsis
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make notification post previews compact and visually balanced

Browse Source 
Hop-State: A_06FPDEHMF08FD1WFT8EABK0
Hop-Proposal: R_06FPDEH4YZGSZFY42E0B818
Hop-Task: T_06FPDE8W8A645NYJXGJSC20
Hop-Attempt: AT_06FPDE8W89FZY4QDYJ5N6AR
This commit is contained in:
cyph3rasi
2026-07-15 10:01:47 -07:00
committed by Hop
parent 6990568baf
commit 6d469fd52e
1 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/notifications/page.tsx
+16 -11
View File
@@ -255,19 +255,23 @@ function NotificationItem({
<Link <Link
href={`/posts/${notification.post.id}`} href={`/posts/${notification.post.id}`}
style={{ style={{
display: 'flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
gap: '10px', gap: '8px',
marginTop: '8px', width: 'fit-content',
padding: '8px', maxWidth: '100%',
background: 'var(--background-secondary)', marginTop: '10px',
borderRadius: '8px', padding: '5px 10px 5px 5px',
background: 'var(--background)',
border: '1px solid var(--border)',
borderRadius: '10px',
color: 'var(--foreground-secondary)', color: 'var(--foreground-secondary)',
fontSize: '14px', fontSize: '13px',
lineHeight: 1.3,
textDecoration: 'none', textDecoration: 'none',
overflow: 'hidden', overflow: 'hidden',
}} }}
aria-label={`View liked post: ${postPreview?.label || 'View post'}`} aria-label={`View post: ${postPreview?.label || 'View post'}`}
> >
{postPreview?.imageUrl && ( {postPreview?.imageUrl && (
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
@@ -275,9 +279,9 @@ function NotificationItem({
src={postPreview.imageUrl} src={postPreview.imageUrl}
alt={postPreview.imageAlt} alt={postPreview.imageAlt}
style={{ style={{
width: 52, width: 48,
height: 52, height: 48,
borderRadius: '6px', borderRadius: '7px',
objectFit: 'cover', objectFit: 'cover',
flexShrink: 0, flexShrink: 0,
}} }}
@@ -285,6 +289,7 @@ function NotificationItem({
)} )}
<span style={{ <span style={{
minWidth: 0, minWidth: 0,
maxWidth: '320px',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',