From 626d4d4d72db014b7b11d26d2637d09c1c1a3c8d Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Wed, 22 Jul 2026 11:06:30 +0000
Subject: [PATCH] Replace timeline photo thumbnail with compact 'view' link

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/TaskModal.tsx | 4 +---
 frontend/src/index.css                | 5 ++---
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/TaskModal.tsx b/frontend/src/components/TaskModal.tsx
index 05b63bc..2ac17d4 100644
--- a/frontend/src/components/TaskModal.tsx
+++ b/frontend/src/components/TaskModal.tsx
@@ -408,9 +408,7 @@ export default function TaskModal({ taskId, onClose, onChanged }: {
                   {eventLine(e) && <div><strong>{eventLine(e)}</strong></div>}
                   {e.note && <div className="timeline-note">{e.note}</div>}
                   {linkedPhoto && (
-                    <div className="timeline-photo-thumb" onClick={() => setLightboxSrc(photoUrl(linkedPhoto.file_path))}>
-                      <img src={photoUrl(linkedPhoto.file_path)} alt="" />
-                    </div>
+                    <span className="timeline-photo-link" onClick={() => setLightboxSrc(photoUrl(linkedPhoto.file_path))}>view</span>
                   )}
                   <div className="timeline-meta">{e.user_name || '—'} · {formatDateTime(e.created_at)}</div>
                 </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 17cc07a..b1e518c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -361,9 +361,8 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
 .timeline-body { flex: 1; min-width: 0; }
 .timeline-note { white-space: pre-wrap; }
 .timeline-meta { font-size: 11.5px; color: var(--text-mid); margin-top: 2px; }
-.timeline-photo-thumb { margin: 6px 0 2px; cursor: pointer; display: inline-block; }
-.timeline-photo-thumb img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--card-border); transition: opacity .12s; }
-.timeline-photo-thumb img:hover { opacity: 0.8; }
+.timeline-photo-link { color: var(--gold); cursor: pointer; font-size: 12px; font-weight: 500; }
+.timeline-photo-link:hover { text-decoration: underline; }
 
 /* ── Photos ────────────────────────────────────────────────── */
 .photo-grid { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }