Can not get the spacing and alignment for the lipgloss elements

[MayukhSobo]

Hi I am working on a open-source project which will act as ETCD/Redis explorer from terminal. Currently I am working on the TUI homescreen which would be a page with

1. Big banner saying the name of the project "Spectacle"
2. A text input area to enter the address of the remote end of etcd
3. Help menu at the bottom.
4. Optionally I want to display a banner mentioning (Successful, Failed, Connecting etc..) with different background color

I have only started to explore the bubbletea along with lipgloss. Here is what I have come up with in the image. But I have few problems

1. I want to display the help messages little more wider. Currently there seems to be a lot of space left and right. How can I do that?

2. The space between text-input and the successful banner (the one which is optional above the help) is decided by MarginBottom(10) in AddInputFieldStyle. The problem is that I can't have a fixed hard coded bottom margin. I need to make it dynamic so that the help menu and the banner stick at the bottom. But if I add more bottom margin my Big Banner goes off screen from above. What I essentially want is to give space below the textinput dynamically based on window height without moving the banner from it's place.

I am adding the github repo so that you guys can see the code. Please help me implement it better. Thanks.

https://github.com/MayukhSobo/Spectacle

[MayukhSobo]

@bashbunni Can you please help?