fix keyboard help overlay overlap

ferologics · ferologics · commit 7df75829f952 · 2026-03-25T23:23:50.000+01:00
diff --git a/src/ui/components/chrome/HelpDialog.tsx b/src/ui/components/chrome/HelpDialog.tsx
@@ -53,32 +53,53 @@ export function HelpDialog({
   const bodyWidth = Math.max(1, width - 4);
   const keyWidth = Math.min(16, Math.max(12, Math.floor(bodyWidth * 0.28)));
   const descriptionWidth = Math.max(1, bodyWidth - keyWidth);
-  const height = Math.min(
-    sections.reduce((total, section) => total + 1 + section.items.length, 0) + 3,
-    Math.max(8, terminalHeight - 2),
+  const contentRowCount = sections.reduce(
+    (rowCount, section) => rowCount + 1 + section.items.length,
+    0,
+  );
+  // ModalFrame contributes the border rows, title row, padding, and one blank spacer row.
+  const modalFrameChromeRowCount = 6;
+  const requiredModalHeight = contentRowCount + modalFrameChromeRowCount;
+  const modalHeight = Math.min(requiredModalHeight, Math.max(8, terminalHeight - 2));
+  const shouldScroll = modalHeight < requiredModalHeight;
+  const content = (
+    <box style={{ width: "100%", flexDirection: "column" }}>
+      {sections.map((section) => (
+        <box key={section.title} style={{ width: "100%", flexDirection: "column" }}>
+          <box style={{ width: "100%", height: 1 }}>
+            <text fg={theme.badgeNeutral}>{section.title}</text>
+          </box>
+          {section.items.map(([keys, description]) => (
+            <box
+              key={`${section.title}:${keys}`}
+              style={{ width: "100%", height: 1, flexDirection: "row" }}
+            >
+              <text fg={theme.accent}>{padText(fitText(keys, keyWidth), keyWidth)}</text>
+              <text fg={theme.muted}>{fitText(description, descriptionWidth)}</text>
+            </box>
+          ))}
+        </box>
+      ))}
+    </box>
   );
 
   return (
     <ModalFrame
-      height={height}
+      height={modalHeight}
       terminalHeight={terminalHeight}
       terminalWidth={terminalWidth}
       theme={theme}
       title="Keyboard help"
       width={width}
       onClose={onClose}
     >
-      {sections.map((section) => (
-        <box key={section.title} style={{ flexDirection: "column" }}>
-          <text fg={theme.badgeNeutral}>{section.title}</text>
-          {section.items.map(([keys, description]) => (
-            <box key={`${section.title}:${keys}`} style={{ flexDirection: "row" }}>
-              <text fg={theme.accent}>{padText(fitText(keys, keyWidth), keyWidth)}</text>
-              <text fg={theme.muted}>{fitText(description, descriptionWidth)}</text>
-            </box>
-          ))}
-        </box>
-      ))}
+      {shouldScroll ? (
+        <scrollbox focused={false} height="100%" scrollY={true} width="100%">
+          {content}
+        </scrollbox>
+      ) : (
+        content
+      )}
     </ModalFrame>
   );
 }
diff --git a/test/ui-components.test.tsx b/test/ui-components.test.tsx
@@ -836,27 +836,27 @@ describe("UI components", () => {
     expect(frame).toContain("beta");
   });
 
-  test("HelpDialog renders the grouped keyboard help modal", async () => {
+  test("HelpDialog keeps previously clipped shortcut rows readable", async () => {
     const theme = resolveTheme("midnight", null);
     const frame = await captureFrame(
       <HelpDialog
         canRefresh={true}
-        terminalHeight={20}
+        terminalHeight={26}
         terminalWidth={76}
         theme={theme}
         onClose={() => {}}
       />,
       76,
-      20,
+      26,
     );
 
     expect(frame).toContain("Keyboard help");
-    expect(frame).toContain("[Esc]");
-    expect(frame).toContain("Navigation");
-    expect(frame).toContain("View");
-    expect(frame).toContain("Review");
-    expect(frame).toContain("F10");
-    expect(frame).toContain("reload / quit");
+    expect(frame).toContain("b               page up");
+    expect(frame).toContain("a               toggle AI notes");
+    expect(frame).toContain("F10             open menus");
+    expect(frame).toContain("r / q           reload / quit");
+    expect(frame).not.toContain("linese/Awrapt/smetadata");
+    expect(frame).not.toContain("reloade/uquit");
   });
 
   test("DiffSectionPlaceholder preserves offscreen section chrome without mounting rows", async () => {
