diff --git a/public/app.mjs b/public/app.mjs
index ce12f98..d07c82a 100644
--- a/public/app.mjs
+++ b/public/app.mjs
@@ -443,14 +443,14 @@ function build_detail_inv_entry(entry) {
type_el.className = `type-pill type-${entry.location_type}`;
type_el.textContent = LOCATION_TYPE_LABEL[entry.location_type] ?? entry.location_type;
- set_text(el, '.detail-inv-ref', entry.location_type === 'grid' ? grid_cell_label(entry) : (entry.location_ref || '—'));
set_text(el, '.detail-inv-qty', entry.quantity ? `×${entry.quantity}` : '');
set_text(el, '.detail-inv-notes', entry.notes || '');
if (entry.location_type === 'grid' && entry.grid_id) {
- const goto_btn = qs(el, '.detail-inv-goto-grid');
- goto_btn.hidden = false;
- goto_btn.addEventListener('click', () => navigate(`/grids/viewer/${entry.grid_id}`));
+ const ref_el = qs(el, '.detail-inv-ref');
+ ref_el.textContent = grid_cell_label(entry);
+ ref_el.classList.add('detail-inv-ref-link');
+ ref_el.addEventListener('click', () => navigate(`/grids/viewer/${entry.grid_id}`));
// Show the grid cell image as a read-only thumbnail
const grid = all_grids.find(g => g.id === entry.grid_id);
diff --git a/public/style.css b/public/style.css
index a958eea..6123a8b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -643,6 +643,15 @@ nav {
.type-pill.type-bom { background: var(--badge-bom-bg); color: var(--badge-bom-text); }
.type-pill.type-digital { background: var(--badge-digital-bg); color: var(--badge-digital-text); }
+.detail-inv-ref-link {
+ cursor: pointer;
+ color: var(--accent);
+}
+
+.detail-inv-ref-link:hover {
+ text-decoration: underline;
+}
+
.inv-component-link {
cursor: pointer;
color: var(--accent);
diff --git a/public/templates.html b/public/templates.html
index f306bc1..fd7cad1 100644
--- a/public/templates.html
+++ b/public/templates.html
@@ -91,7 +91,6 @@
-