weaveworks
SPIKE: Fix overlapping UI elements in bootstrap wizard if height of terminal window is insufficient
Text inputs or git providers table in the bootstrap wizard in gitops run are mangled if the height of the terminal window is insufficient.
Examples of "mangled" or overlapping elements if terminal window is too low:
Resizing the window fixes the issue:
Supposedly, adding a Bubble Tea viewport component around the UI elements should fix this issue and make the UI reserve space for inputs. How to set viewport height in this case properly (and if it needs to be set to a fixed value at all) and make it adapt to different number of flag text inputs for different git providers requires further research.
The initial simple fix (wrapping controls with a viewport of fixed height) didn't work. It looks like it's a complex issue with displaying more lines than the terminal window height. So, this issue requires more research. I plan to return to it later.
I've decided to retry the viewport fix from scratch, created a basic prototype based on the Bubble Tea pager example and copied most of inputs from the bootstrap wizard there. So, for the prototype the viewport prevents the inputs from being mangled if the terminal height is insufficient (probably in the original fix the viewport height was not set correctly):
https://user-images.githubusercontent.com/8824708/197051600-fcdafa7a-d5ca-49e8-b2f3-4af7113f8b92.mov
When using arrow buttons to scroll up and down, if the terminal height is insufficient (in the first part of the video), the UI controls look as expected (I have not copied the entire text inputs style on focus/blur code, but the basic code works fine).
Only when using the terminal scrollbar to scroll, the previous rendered part of the UI disappears until redrawing is forced with either up or down arrow or mouse wheel scrolling (which resents the terminal scrollbar position to the bottom).
As @ozamosi said,
You can't affect the terminal's scroll bars - they're part of the terminal itself, whereas the program is running in a TTY. Imagine the program as a java applet or a flash animation, and the user clicked the back button.
I think the APIs were designed for the terminal "window" to be a printer and the "contents" to just be paper :thinking_face: Bubbletea's rendering is basically just to hit backspace until it's at the top left corner, and then echoes a full screen of characters.
I also came across some issues related to weird scrollbars behavior and redrawing content in the terminal (when using alt a screen buffer/alt screen):
https://github.com/charmbracelet/bubbletea/issues/349 https://github.com/xtermjs/xterm.js/issues/802
So, the issue with the screen not repainted when scrolling the terminal window with system scrollbars is by design and not a Bubble Tea bug.
To solve the original issue with overlapping inputs, we'll wrap them in a Bubble Tea viewport component and switch to using Up and Down arrow keys only for scrolling (scrolling the viewport with arrow keys or mousewheel is enabled for the viewport by default, we'll just need to remove using arrow keys for navigating between inputs) while only Tab and Shift + Tab will be used for navigating between inputs. Some other minor adjustments of Bubble tea message processing might be needed. The issue will be solved in #2920
Known limitations: Viewport is sized based on Bubble Tea's WindowSizeMsg, and this message is not available on Windows. But we do not support Windows officially for CLI anyways.