add maxheight & rebuild

Signed-off-by: Hadi <[email protected]>

dist/chunk-8j8kdeb4.js

@@ -4,9 +4,9 @@ import {
 } from "./chunk-9cbm4zqz.js";
 
 // src/components/Modal.tsx
+import { insertNode as _$insertNode } from "@opentui/solid";
 import { createComponent as _$createComponent } from "@opentui/solid";
 import { effect as _$effect } from "@opentui/solid";
-import { insertNode as _$insertNode } from "@opentui/solid";
 import { insert as _$insert } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
@@ -15,7 +15,8 @@ import { Portal, useTerminalDimensions } from "@opentui/solid";
 import { Show } from "solid-js";
 function Modal(props) {
   const dimensions = useTerminalDimensions();
-  const maxPanelHeight = () => Math.max(5, dimensions().height - 4);
+  const screenCap = () => Math.max(5, dimensions().height - 4);
+  const maxPanelHeight = () => Math.min(props.maxHeight ?? screenCap(), screenCap());
   const maxContentHeight = () => Math.max(1, maxPanelHeight() - 4);
   return _$createComponent(Portal, {
     get children() {
@@ -24,7 +25,7 @@ function Modal(props) {
           return props.open;
         },
         get children() {
-          var _el$ = _$createElement("box"), _el$2 = _$createElement("box"), _el$3 = _$createElement("scrollbox");
+          var _el$ = _$createElement("box"), _el$2 = _$createElement("box");
           _$insertNode(_el$, _el$2);
           _$setProp(_el$, "position", "absolute");
           _$setProp(_el$, "top", 0);
@@ -32,19 +33,38 @@ function Modal(props) {
           _$setProp(_el$, "alignItems", "center");
           _$setProp(_el$, "justifyContent", "center");
           _$setProp(_el$, "zIndex", 2000);
-          _$insertNode(_el$2, _el$3);
           _$setProp(_el$2, "border", true);
           _$setProp(_el$2, "flexDirection", "column");
           _$setProp(_el$2, "paddingLeft", 2);
           _$setProp(_el$2, "paddingRight", 2);
           _$setProp(_el$2, "paddingTop", 1);
           _$setProp(_el$2, "paddingBottom", 1);
-          _$setProp(_el$3, "flexShrink", 1);
+          _$insert(_el$2, _$createComponent(Show, {
-          _$setProp(_el$3, "scrollY", true);
+            get when() {
-          _$setProp(_el$3, "scrollX", false);
+              return props.scrollable;
-          _$insert(_el$3, () => props.children);
+            },
+            get fallback() {
+              return (() => {
+                var _el$4 = _$createElement("box");
+                _$setProp(_el$4, "flexDirection", "column");
+                _$setProp(_el$4, "overflow", "hidden");
+                _$insert(_el$4, () => props.children);
+                _$effect((_$p) => _$setProp(_el$4, "maxHeight", maxContentHeight(), _$p));
+                return _el$4;
+              })();
+            },
+            get children() {
+              var _el$3 = _$createElement("scrollbox");
+              _$setProp(_el$3, "flexShrink", 1);
+              _$setProp(_el$3, "scrollY", true);
+              _$setProp(_el$3, "scrollX", false);
+              _$insert(_el$3, () => props.children);
+              _$effect((_$p) => _$setProp(_el$3, "maxHeight", maxContentHeight(), _$p));
+              return _el$3;
+            }
+          }));
           _$effect((_p$) => {
-            var _v$ = dimensions().width, _v$2 = dimensions().height, _v$3 = props.backdropColor ?? RGBA.fromInts(0, 0, 0, 150), _v$4 = theme.mouse ? props.onDismiss : undefined, _v$5 = props.width ?? 50, _v$6 = maxPanelHeight(), _v$7 = theme.borderStyle, _v$8 = props.accentColor ?? theme.primary, _v$9 = props.backgroundColor ?? theme.background, _v$0 = theme.mouse ? (event) => event.stopPropagation() : undefined, _v$1 = maxContentHeight();
+            var _v$ = dimensions().width, _v$2 = dimensions().height, _v$3 = props.backdropColor ?? RGBA.fromInts(0, 0, 0, 150), _v$4 = theme.mouse ? props.onDismiss : undefined, _v$5 = props.width ?? 50, _v$6 = maxPanelHeight(), _v$7 = theme.borderStyle, _v$8 = props.accentColor ?? theme.primary, _v$9 = props.backgroundColor ?? theme.background, _v$0 = theme.mouse ? (event) => event.stopPropagation() : undefined;
             _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "width", _v$, _p$.e));
             _v$2 !== _p$.t && (_p$.t = _$setProp(_el$, "height", _v$2, _p$.t));
             _v$3 !== _p$.a && (_p$.a = _$setProp(_el$, "backgroundColor", _v$3, _p$.a));
@@ -55,7 +75,6 @@ function Modal(props) {
             _v$8 !== _p$.h && (_p$.h = _$setProp(_el$2, "borderColor", _v$8, _p$.h));
             _v$9 !== _p$.r && (_p$.r = _$setProp(_el$2, "backgroundColor", _v$9, _p$.r));
             _v$0 !== _p$.d && (_p$.d = _$setProp(_el$2, "onMouseDown", _v$0, _p$.d));
-            _v$1 !== _p$.l && (_p$.l = _$setProp(_el$3, "maxHeight", _v$1, _p$.l));
             return _p$;
           }, {
             e: undefined,
@@ -67,8 +86,7 @@ function Modal(props) {
             s: undefined,
             h: undefined,
             r: undefined,
-            d: undefined,
+            d: undefined
-            l: undefined
           });
           return _el$;
         }

dist/chunk-ggv00s7t.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   Modal
-} from "./chunk-6g54ffq0.js";
+} from "./chunk-8j8kdeb4.js";
 import {
   helpOpen,
   toggleHelp
@@ -53,6 +53,10 @@ function HelpModal(props = {}) {
     get width() {
       return props.width;
     },
+    get maxHeight() {
+      return entries().length + 6;
+    },
+    scrollable: true,
     get children() {
       return [(() => {
         var _el$ = _$createElement("text");

dist/components/HelpModal.js

@@ -1,8 +1,8 @@
 // @bun
 import {
   HelpModal
-} from "../chunk-qpd35mce.js";
+} from "../chunk-ggv00s7t.js";
-import"../chunk-6g54ffq0.js";
+import"../chunk-8j8kdeb4.js";
 import"../chunk-9cbm4zqz.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";

dist/components/Modal.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   Modal
-} from "../chunk-6g54ffq0.js";
+} from "../chunk-8j8kdeb4.js";
 import"../chunk-9cbm4zqz.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";

dist/components/help.js

@@ -1,11 +1,11 @@
 // @bun
+import {
+  HelpModal
+} from "../chunk-ggv00s7t.js";
+import"../chunk-8j8kdeb4.js";
 import {
   HelpBar
 } from "../chunk-mj1hhxzy.js";
-import {
-  HelpModal
-} from "../chunk-qpd35mce.js";
-import"../chunk-6g54ffq0.js";
 import"../chunk-9cbm4zqz.js";
 import"../chunk-hcq62p48.js";
 import"../chunk-cnhhssmz.js";

dist/components/index.js

@@ -1,7 +1,4 @@
 // @bun
-import {
-  NotificationHost
-} from "../chunk-5q9en54m.js";
 import {
   ProgressBar
 } from "../chunk-hq5k1y0s.js";
@@ -18,18 +15,21 @@ import {
 import {
   Toggle
 } from "../chunk-gc6m7gbw.js";
+import {
+  Modal
+} from "../chunk-8j8kdeb4.js";
 import {
   Badge
 } from "../chunk-5my64v78.js";
 import {
   Box
 } from "../chunk-zvmj6cvs.js";
-import {
-  Modal
-} from "../chunk-6g54ffq0.js";
 import {
   MinSizeGuard
 } from "../chunk-xd40rew1.js";
+import {
+  NotificationHost
+} from "../chunk-5q9en54m.js";
 import"../chunk-y6txxzxk.js";
 import"../chunk-9cbm4zqz.js";
 import"../chunk-hcq62p48.js";

src/components/HelpModal.tsx

@@ -36,6 +36,8 @@ export function HelpModal(props: HelpModalProps = {}) {
       backgroundColor={props.backgroundColor}
       backdropColor={props.backdropColor}
       width={props.width}
+      maxHeight={entries().length + 6}
+      scrollable
     >
       <text attributes={TextAttributes.BOLD}>Keybindings</text>
       <text> </text>

src/components/Modal.tsx

@@ -10,17 +10,14 @@ export interface ModalProps extends ParentProps {
   backgroundColor?: ColorInput;
   backdropColor?: ColorInput;
   width?: number;
+  maxHeight?: number;
+  scrollable?: boolean;
 }
 
 export function Modal(props: ModalProps) {
   const dimensions = useTerminalDimensions();
-  // Leave a margin of screen rows above/below so the panel never touches the
+  const screenCap = () => Math.max(5, dimensions().height - 4);
-  // terminal edges, then reserve the border + vertical padding from that
+  const maxPanelHeight = () => Math.min(props.maxHeight ?? screenCap(), screenCap());
-  // budget for the scrollable content itself. On a short terminal (or with
-  // a lot of content, e.g. HelpModal's keybinding list) this keeps the panel
-  // fully on-screen — with a scrollbar — instead of spilling past the bottom
-  // edge with no way to see or reach the rest of it.
-  const maxPanelHeight = () => Math.max(5, dimensions().height - 4);
   const maxContentHeight = () => Math.max(1, maxPanelHeight() - 4);
 
   return (
@@ -52,9 +49,18 @@ export function Modal(props: ModalProps) {
             paddingBottom={1}
             onMouseDown={theme.mouse ? (event: MouseEvent) => event.stopPropagation() : undefined}
           >
-            <scrollbox maxHeight={maxContentHeight()} flexShrink={1} scrollY scrollX={false}>
+            <Show
-              {props.children}
+              when={props.scrollable}
-            </scrollbox>
+              fallback={
+                <box flexDirection="column" maxHeight={maxContentHeight()} overflow="hidden">
+                  {props.children}
+                </box>
+              }
+            >
+              <scrollbox maxHeight={maxContentHeight()} flexShrink={1} scrollY scrollX={false}>
+                {props.children}
+              </scrollbox>
+            </Show>
           </box>
         </box>
       </Show>