tuiboard 0.7.2 → 0.7.3

package/CHANGELOG.md

@@ -5,6 +5,21 @@ All notable changes to **tuiboard** are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.3] - 2026-06-02
+
+### Fixed
+- Opening a modal no longer shifts the whole dashboard up by a row. The Agenda's
+  tall scrollbox was inflating the main row one line past the terminal (flex
+  basis `auto` takes the content height); a modal in its place removed that
+  overflow, which read as a jump. The main row now grows purely from the
+  available space (`flex-basis: 0`), so the layout is steady whatever's on
+  screen. Modals also render in the Agenda's exact slot, so there's no
+  horizontal reflow either.
+
+### Changed
+- Reclaimed a row: the board and agenda are one row taller, and the keyboard
+  cheat-sheet sits flush on the bottom line.
+
 ## [0.7.2] - 2026-06-02
 
 ### Changed
@@ -98,6 +113,7 @@ First public release on npm. This entry captures the full feature set at launch.
 
 Built with [OpenTUI](https://opentui.com) + SolidJS on Bun.
 
+[0.7.3]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.7.3
 [0.7.2]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.7.2
 [0.7.1]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.7.1
 [0.7.0]: https://github.com/NazzarenoGiannelli/tuiboard/releases/tag/v0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuiboard",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Terminal kanban for markdown task boards, with optional Today/Tomorrow planner, 24h agenda + calendar overlay, and a live Claude Code agent view. Use only the panels you want.",
   "type": "module",
   "license": "MIT",

package/src/app.tsx

@@ -115,23 +115,35 @@ function App() {
         width: "100%",
         height: "100%",
         backgroundColor: T.bg,
-        padding: 1,
+        // No bottom padding: the keyboard cheat-sheet sits flush on the last
+        // row, which gives the board + agenda one extra row of height. Safe
+        // thanks to the flexBasis:0 main row — the content just fills the space.
+        paddingTop: 1,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingBottom: 0,
       }}
     >
       <TopBar store={store} />
       <box style={{ height: 1 }} />
       {/*
-        rootView + ModalLayer are flex-row siblings. The modal panel is exactly
-        the Agenda's width, and the Dashboard hides the Agenda while a modal is
-        open — so the modal drops into the Agenda's slot with zero reflow of the
-        left side (board / planner / agents). When no modal is open ModalLayer
-        renders nothing and rootView gets the whole row.
+        The default Dashboard renders its modal inside the Agenda's slot, so the
+        layout stays put when a modal opens. The standalone `--view=` modes have
+        no Agenda slot, so they get the modal here as a right-hand panel.
+        (`view` is fixed at launch, never reactive.)
+
+        `flexBasis: 0` + `minHeight: 0` are load-bearing: without them the row's
+        flex-basis is `auto`, so the Agenda's tall scrollbox inflates the row to
+        its content height (1 row past the terminal). That overflow vanishes
+        when a modal (no scrollbox) takes the slot — which is exactly the 1-row
+        "shift" the whole bottom strip used to do. Basis 0 makes the row grow
+        purely from the available space, ignoring content, so it's stable.
       */}
-      <box style={{ flexDirection: "row", flexGrow: 1 }}>
+      <box style={{ flexDirection: "row", flexGrow: 1, flexBasis: 0, minHeight: 0 }}>
         <box style={{ flexDirection: "column", flexGrow: 1 }}>
           {rootViewFor(view, store)}
         </box>
-        <ModalLayer store={store} />
+        {view ? <ModalLayer store={store} /> : null}
       </box>
       <BottomBar store={store} />
     </box>

package/src/ui/Modal.tsx

@@ -20,13 +20,13 @@ import {
   parseTimeBlockShortcut,
 } from "~/store/parsers";
 import { ATTR, T } from "~/ui/glyphs";
-import { TIMELINE_WIDTH } from "~/views/Dashboard";
+import { AGENDA_WIDTH } from "~/ui/layout";
 import type { TuiStore } from "~/store/index";
 import type { PriorityLevel, TimeBlock } from "~/types";
 
 /** The modal panel matches the Agenda's width so it can drop into the Agenda's
- *  slot (which the Dashboard vacates while a modal is open) with no reflow. */
-const MODAL_WIDTH = TIMELINE_WIDTH;
+ *  slot (the Dashboard renders it there while a modal is open) with no reflow. */
+const MODAL_WIDTH = AGENDA_WIDTH;
 
 export function ModalLayer(props: { store: TuiStore }) {
   const modal = createMemo(() => props.store.state.ui.modal);
@@ -69,16 +69,14 @@ function DialogShell(props: DialogShellProps) {
   return (
     <box
       style={{
-        // The modal panel: same width + marginLeft as the Agenda so it occupies
-        // the Agenda's slot (the Dashboard hides the Agenda while a modal is
-        // open) with no reflow. The title rides in the top border, exactly like
-        // the board columns and the other zones.
+        // Byte-identical layout to the Agenda panel (TimelineView): same width,
+        // marginLeft, flexGrow, border and padding, so it occupies the Agenda's
+        // slot at the exact same size and the dashboard doesn't shift when a
+        // modal opens. The title rides in the top border like the columns/zones.
         flexDirection: "column",
         width: MODAL_WIDTH,
         minWidth: MODAL_WIDTH,
         flexGrow: 0,
-        flexShrink: 0,
-        alignSelf: "stretch",
         marginLeft: 1,
         backgroundColor: T.panelBgActive,
         border: true,
@@ -86,8 +84,6 @@ function DialogShell(props: DialogShellProps) {
         borderColor: T.borderActive,
         paddingLeft: 1,
         paddingRight: 1,
-        paddingTop: 1,
-        paddingBottom: 1,
       }}
       title={`┤ ${props.title} ├`}
       titleAlignment="left"

package/src/ui/layout.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared dashboard layout constants. Kept in a leaf module so both the
+ * Dashboard and the Modal can import them without an import cycle (the modal
+ * panel matches the Agenda's width so it can drop into the Agenda's slot).
+ */
+
+/** Width (in cells) of the right-hand Agenda panel — and of the modal panel,
+ *  which takes the Agenda's slot while a modal is open. */
+export const AGENDA_WIDTH = 50;
+
+/** Row height of the bottom Agents strip — enough for ~5 sessions. */
+export const AGENTS_HEIGHT = 7;

package/src/views/Dashboard.tsx

@@ -25,19 +25,13 @@ import { AgentsBar } from "~/ui/AgentsBar";
 import { BoardView } from "~/ui/BoardView";
 import { TimelineView } from "~/ui/TimelineView";
 import { PlannerPanel } from "~/ui/PlannerPanel";
+import { ModalLayer } from "~/ui/Modal";
+import { AGENDA_WIDTH, AGENTS_HEIGHT } from "~/ui/layout";
 import { AgentsOnly } from "~/views/AgentsOnly";
 import { BoardOnly } from "~/views/BoardOnly";
 import { TimelineOnly } from "~/views/TimelineOnly";
 import type { TuiStore } from "~/store/index";
 
-/**
- * Width (in cells) for the right-column Agenda panel on a wide terminal. The
- * modal panel matches this so it can drop into the Agenda's slot (see
- * ModalLayer) without reflowing the rest of the dashboard.
- */
-export const TIMELINE_WIDTH = 50;
-/** Row height for the bottom Agents strip — enough for ~5 sessions. */
-const AGENTS_HEIGHT = 7;
 
 export function Dashboard(props: { store: TuiStore }) {
   const ui = () => props.store.state.ui;
@@ -100,10 +94,19 @@ function FourZoneLayout(props: { store: TuiStore }) {
           <AgentsBar store={props.store} height={AGENTS_HEIGHT} />
         </Show>
       </box>
-      {/* Right column: Agenda (full height). Hidden while a modal is open so
-          the modal panel takes its slot with no reflow. */}
-      <Show when={visible().timeline && !ui().modal}>
-        <TimelineView store={props.store} width={TIMELINE_WIDTH} />
+      {/* Right column: the Agenda — or, while a modal is open, the modal panel
+          in the Agenda's exact slot (same parent, same width). Swapping them in
+          place keeps the whole layout and every height constant; nothing
+          shifts. The modal still appears here even if the Agenda is disabled. */}
+      <Show
+        when={ui().modal}
+        fallback={
+          <Show when={visible().timeline}>
+            <TimelineView store={props.store} width={AGENDA_WIDTH} />
+          </Show>
+        }
+      >
+        <ModalLayer store={props.store} />
       </Show>
       {/* ModalLayer rendered at App level so it can sit beside any view */}
     </box>