diff --git a/public/app.mjs b/public/app.mjs index 31f3863..72e6d01 100644 --- a/public/app.mjs +++ b/public/app.mjs @@ -1293,7 +1293,8 @@ function render_grid_viewer() { } else { cell.classList.add('empty'); } - set_text(cell, '.grid-cell-label', `R${row + 1}C${col + 1}`); + const label_el = qs(cell, '.grid-cell-label'); + label_el.textContent = `R${row + 1}C${col + 1}`; const count = all_inventory.filter(inv => inv.location_type === 'grid' && inv.grid_id === grid.id && @@ -1303,7 +1304,7 @@ function render_grid_viewer() { const badge = document.createElement('span'); badge.className = 'grid-cell-count'; badge.textContent = count; - qs(cell, '.grid-cell-img-wrap').appendChild(badge); + label_el.appendChild(badge); } cell.addEventListener('click', (e) => open_cell_inventory(grid, row, col, e)); diff --git a/public/style.css b/public/style.css index c5b1758..c70460a 100644 --- a/public/style.css +++ b/public/style.css @@ -1483,33 +1483,19 @@ nav { } .grid-cell-label { - position: absolute; - bottom: 0; - left: 0; - right: 0; + display: flex; + justify-content: center; + align-items: center; + gap: 0.3em; font-size: 0.65rem; - color: #ccc; + color: var(--text-dim); text-align: center; font-family: var(--font-mono); - background: linear-gradient(transparent, rgba(0,0,0,0.7)); - border-radius: 0 0 3px 3px; - padding: 6px 2px 2px; - pointer-events: none; } .grid-cell-count { - position: absolute; - top: 3px; - right: 3px; - background: #2e7d4f; - color: #fff; - font-size: 0.6rem; + color: #4caf50; font-weight: 700; - font-family: var(--font-mono); - padding: 1px 5px; - border-radius: 8px; - pointer-events: none; - line-height: 1.5; } /* ===== GRID TYPE PILL ===== */