mikael-lovqvists-claude-agent/task-inventory
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix grid column misalignment caused by hidden expand button

Browse Source 
display:none removes element from grid flow, shifting other columns.
Use visibility:hidden instead so the expand button always holds its cell.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-05-17 22:35:23 +00:00
parent 4b5c3a3725
commit e88af98b2b
3 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/app.mjs
View File

@@ -346,10 +346,10 @@ function make_entry_row(entry, children_map) {
row.dataset.priority = entry.priority; row.dataset.priority = entry.priority;
row.dataset.status = entry.status; row.dataset.status = entry.status;
// Expand button — hidden in flat mode // Expand button — invisible in flat mode or when no children
const expand_btn = row.querySelector('.btn-expand'); const expand_btn = row.querySelector('.btn-expand');
if (!state.flat_mode && children.length > 0) { if (!state.flat_mode && children.length > 0) {
show(expand_btn); expand_btn.style.visibility = 'visible';
expand_btn.textContent = state.expanded.has(entry.id) ? '▼' : '▶'; expand_btn.textContent = state.expanded.has(entry.id) ? '▼' : '▶';
expand_btn.addEventListener('click', () => { expand_btn.addEventListener('click', () => {
if (state.expanded.has(entry.id)) { state.expanded.delete(entry.id); } if (state.expanded.has(entry.id)) { state.expanded.delete(entry.id); }

1
public/style.css
View File

@@ -198,6 +198,7 @@ main { padding: 1.25rem; }
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
visibility: hidden;
} }
.btn-expand:hover { color: #aaa; background: #333; } .btn-expand:hover { color: #aaa; background: #333; }

2
public/templates.html
View File

@@ -1,7 +1,7 @@
<!-- Entry list item --> <!-- Entry list item -->
<template id="t-entry-row"> <template id="t-entry-row">
<div class="task-row"> <div class="task-row">
<button class="btn-expand" hidden></button> <button class="btn-expand"></button>
<div class="task-meta"> <div class="task-meta">
<div class="entry-type-chip" hidden></div> <div class="entry-type-chip" hidden></div>
<span class="task-id"></span> <span class="task-id"></span>