lineage/orgchain
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Orgchain: three columns, so a long Inspect no longer opens a gap

Browse Source 
The side column (act and inspect) grew with keys, leaves and secrets,
and because it spanned both grid rows it stretched the first one, which
pushed the timeline far below the tree. The layout is now three columns
that run on their own (holdings; tree with its timeline; act and
inspect) over a flexible last row, and the medium layout keeps the
timeline under the tree as well. The footer links the scure licenses.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H4upF5LVwmPDDqrhdUfnXh
This commit is contained in:
teahubxyzandClaude Opus 5.5 committed 2026-10-14 20:31:25 -07:00
1 parent 17b8692174
commit aeb11d334f
2 files changed
+7 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/orgchain.css
+6 -3
View File
@@ -78,7 +78,10 @@ button.flag:hover { background: var(--band-fg); color: var(--band); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 32px var(--gutter) 56px; display: grid; gap: 40px; }
.work {
display: grid; gap: 36px 28px; align-items: start;
grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 390px); grid-template-areas: "hold tree side" "time time side";
grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 390px); grid-template-areas: "hold tree side" "hold time side";
/* Three columns that run on their own: holdings; the tree with its timeline under it; act and inspect, which run
long. The flexible last row takes the long columns, so no column opens a gap in another. */
grid-template-rows: auto 1fr;
}
.hold-blk { grid-area: hold; }
.tree-blk { grid-area: tree; }
@@ -261,11 +264,11 @@ textarea { resize: vertical; line-height: 1.5; }
.scrub { flex-wrap: nowrap; }
}
@media (max-width: 1120px) {
.work { grid-template-columns: minmax(0, 1fr) minmax(0, 370px); grid-template-areas: "hold side" "tree side" "time time"; }
.work { grid-template-columns: minmax(0, 1fr) minmax(0, 370px); grid-template-rows: auto auto 1fr; grid-template-areas: "hold side" "tree side" "time side"; }
}
@media (max-width: 760px) {
.clock { position: static; }
.work { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hold" "tree" "side" "time"; }
.work { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "hold" "tree" "side" "time"; }
}
@media (max-width: 640px) {
.panel { box-shadow: 5px 5px 0 var(--shadow); }