Fix modal height with max-height constraint

Thorsten
Thorsten Ball • @mrnugget
 6mo ago
Look at how we render @cli/src/tui/widgets/mysterious-message-modal.ts -- Problem is that the modal extends all the way to the top and bottom. I'd want a fixed max-height, like 20 lines or something. We already ahve other modals with fixed height, like our command palette or the handoff modal. Can you take a look at those to see how that works? I also created a new tmux session, `test-modal`, in which you can run the CLI or test programs or whatever to see whether it works. I'd suggest creating a small standalone program (like @cli/src/tui/animated-supernova.run.ts) in which you show only the @cli/src/tui/widgets/mysterious-message-modal.ts, and then run that and make sure that it's only 20 lines max height and scrollable and so on
Explored 1 file, 3 searches

Let me look at the fuzzy-picker to see how it constrains height, and check the handoff flow widget:

Explored 2 files

The FuzzyPicker doesn't seem to enforce a specific height. Let me search for how modals constrain their dimensions:

Explored 1 file, 1 search

I see customFlowDimensions: { width: 120, height: 30 } is used for limiting modal sizes. Let me look at the command-palette-wrapper to see how that's applied:

Explored 1 file

Now I understand the pattern. The command palette wrapper applies BoxConstraints.loose(width, height) to constrain the modal. But for the mysterious message modal, it's rendered directly (not through the command palette), so I need to fix the constraints in the modal itself.

Looking at the current implementation, the issue is that maxAllowedHeight = screenHeight - 4 allows it to expand to almost the full screen. I need to set a fixed max height like 20. Let me create a test program first:

Created mysterious-message-modal.run.ts
+38
Ran 3 commands
Explored 1 file, 1 search
Edited mysterious-message-modal.run.ts
+2
-1
Ran 2 commands

I can see the modal is indeed stretching to full screen height. Now let me fix it by changing the max height from screenHeight - 4 to a fixed value like 20:

Edited mysterious-message-modal.ts
+2
-1
Ran 3 commands

The modal is now constrained to 20 lines max height with a scrollbar visible. Let me test scrolling:

Ran 2 commands

Scrolling works. Let me close and cleanup:

$ tmux send-keys -t test-modal Escape

Now let me run the typecheck to verify everything is correct:

$ pnpm exec tsc -b

Let me also clean up the test file:

$ rm cli/src/tui/mysterious-message-modal.run.ts

The fix is complete. The modal is now constrained to a maximum height of 20 lines (or less if the screen is smaller), with content scrollable when it exceeds this limit. The change was minimal - just calculating maxAllowedHeight as Math.min(fixedMaxHeight, screenHeight - 4) instead of just screenHeight - 4.