digital-garbage
2bd604721c
v4's Simple mode is the Editor with about ten `display: none !important` rules over it, which is not a smaller app but the same one wearing a mask. It broke in the way that arrangement always breaks: a collapsed column was marked [hidden], nothing can slide a display:none element into view, and the panel button did nothing at all and said nothing. So the same shape is built the other way round -- a region that does not exist yet is ABSENT, and the toggles live in rails that are siblings of the panels, never inside what they hide. Two kit elements, because both are layout primitives rather than app code: frame.app establishes the one definite height everything else fills, and workspace.docked is the centre-shrinks-between-two-panels arrangement. Three faults found by looking at it rather than by reasoning about it: * The prompt was in the DOM with no pixels. A vertical split inside a parent whose height came from its content resolves its second pane to zero, and nothing anywhere reports that. * The whole app rendered as a strip at the top of an empty window: `100%` of a `min-height` is `auto`. * Two fixed-width panels plus their rails are wider than a 480px window, and the page scrolled sideways -- taking the transport bar with it. The collapse is deliberately not animated: a remembered-closed panel would animate shut on every load, which reads as the app doing something rather than as a preference being restored. Also: jsdom gives a document with no url an OPAQUE ORIGIN, where reading window.localStorage throws on the property access itself. Everything that remembers a preference was silently taking its fallback path in every jsdom test, so "it is remembered" could not be tested at the cheap layer and looked like it worked.
26 lines
959 B
HTML
26 lines
959 B
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>FunPack</title>
|
|
<script src="/funpack/app/shell/theme.js"></script>
|
|
<link rel="stylesheet" href="/funpack/app/composer/composer.css">
|
|
<style>
|
|
/* The app frame itself: the only rule outside the kit, and it sets no
|
|
colours, sizes or type -- just the shape of the page. A DEFINITE height,
|
|
because the kit's frame fills what it is given and "100% of auto" is
|
|
auto: with min-height here the whole app rendered as a strip at the top
|
|
of an empty window. */
|
|
html, body { block-size: 100%; }
|
|
body { display: flex; margin: 0; }
|
|
#app { flex: 1; display: flex; min-block-size: 0; padding: var(--sp-4); }
|
|
#app > * { flex: 1; min-inline-size: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src="/funpack/app/boot.js"></script>
|
|
</body>
|
|
</html>
|