From aeb11d334f871dec59713e5e8648ad3302f6e01e Mon Sep 17 00:00:00 2001
From: teahubxyz <teahubxyz@teahub.xyz>
Date: Wed, 14 Oct 2026 20:31:25 -0700
Subject: [PATCH] Orgchain: three columns, so a long Inspect no longer opens a
 gap

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
---
 index.html       | 2 +-
 src/orgchain.css | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 3e35cb4..01b22a8 100644
--- a/index.html
+++ b/index.html
@@ -135,7 +135,7 @@
       <div id="confirm" class="confirm" hidden></div>
     </div>
     <p>Everything here lives in this browser: test keys (a lab root per holding), a private toy chain, pretend money. Nothing is a real key, and minting a real root is the operator's call.</p>
-    <p>Orgchain is lineage's app, built on <a href="https://supertestnet.lol">Super Testnet</a>'s chain and inscriptions, where the full lab lives. Source: <a href="https://teahub.xyz/lineage/orgchain">lineage/orgchain</a>. Licenses: <a href="./licenses/supertestnet-CC0.txt">Super Testnet (CC0)</a>, <a href="./licenses/tapscript.txt">tapscript</a>, <a href="./licenses/noble-curves.txt">noble-curves</a>, <a href="./licenses/noble-hashes.txt">noble-hashes</a>.</p>
+    <p>Orgchain is lineage's app, built on <a href="https://supertestnet.lol">Super Testnet</a>'s chain and inscriptions, where the full lab lives. Source: <a href="https://teahub.xyz/lineage/orgchain">lineage/orgchain</a>. Licenses: <a href="./licenses/supertestnet-CC0.txt">Super Testnet (CC0)</a>, <a href="./licenses/tapscript.txt">tapscript</a>, <a href="./licenses/noble-curves.txt">noble-curves</a>, <a href="./licenses/noble-hashes.txt">noble-hashes</a>, <a href="./licenses/scure-base.txt">scure-base</a>, <a href="./licenses/scure-bip32.txt">scure-bip32</a>, <a href="./licenses/scure-bip39.txt">scure-bip39</a>.</p>
   </footer>
 </main>
 </body>
diff --git a/src/orgchain.css b/src/orgchain.css
index 31134cc..f21369c 100644
--- a/src/orgchain.css
+++ b/src/orgchain.css
@@ -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); }