fix: wrapping and height calculations #485
Conversation
| @@ -521,7 +524,7 @@ func (f *Form) Update(msg tea.Msg) (tea.Model, tea.Cmd) { | |||
| } | |||
| f.selector.Range(func(_ int, group *Group) bool { | |||
| if group.fullHeight() > msg.Height { | |||
| group.WithHeight(msg.Height) | |||
| group.WithHeight(msg.Height - 1) | |||
There was a problem hiding this comment.
this accounts for the help menu at the bottom of the window taking up one row. Can add a const for this 1 for legibility if you'd prefer
There was a problem hiding this comment.
i think just a comment would be ok enough 🤔
eg:
| group.WithHeight(msg.Height - 1) | |
| group.WithHeight(msg.Height - 1) // subtracts help height |
This reverts commit b41c5e7.
| @@ -285,25 +288,26 @@ func (g *Group) fullHeight() int { | |||
| height := g.selector.Total() | |||
| g.selector.Range(func(_ int, field Field) bool { | |||
| height += lipgloss.Height(field.View()) | |||
| height += lipgloss.Height(gap) | |||
There was a problem hiding this comment.
without this line, content that fits in the current window size will truncate its height slightly
what it looks like without this line:
https://github.com/user-attachments/assets/7a3a0d33-2524-49ca-b334-02ba072af10d
|
In case we don't want to merge the stacked buttons here, I have another version of this branch where I removed those features. https://github.com/charmbracelet/huh/tree/horizontal-btns |
|
rip, looks like these changes might be breaking grid layout...
In the image above we're missing options 4-6. This is happening at all widths. Absolutely tragic 😭 Build info:
|
| theme := s.theme | ||
| if theme == nil { | ||
| theme = ThemeCharm() | ||
| } | ||
| return theme | ||
| } |
There was a problem hiding this comment.
| theme := s.theme | |
| if theme == nil { | |
| theme = ThemeCharm() | |
| } | |
| return theme | |
| } | |
| if s.theme != nil { | |
| return s.theme | |
| } | |
| return ThemeCharm() | |
| } |
feels a bit better I think 🤔
There was a problem hiding this comment.
so true, I can update this for all fields
| @@ -268,7 +270,8 @@ func (g *Group) Update(msg tea.Msg) (tea.Model, tea.Cmd) { | |||
|
|
|||
| switch msg := msg.(type) { | |||
| case tea.WindowSizeMsg: | |||
| g.WithHeight(max(g.height, min(g.fullHeight(), msg.Height-1))) | |||
| g.WithHeight(min(g.fullHeight(), msg.Height-1)) | |||
Changes
Content used to cut off if the height of the window was smaller than the content height.
Wrapped content broke formatting and caused content to get cut off.
The offset calculations were off and wouldn't scroll to show hidden content.
There was an off by one error for content that exceeded the window height (would always hide the title of the first field).
Other considerations
Some fieds (confirm, select, input) have the option to be shown as inline. When shown as inline, the styles do not wrap (intentional)
Buttons will stack vertically if they don't fit horizontally. Button widths will also match (do we want that by default or only when stacked?)
Fixes
closes #398
closes #429
Maybe others (need to confirm)
Here's what this PR looks like:
https://github.com/user-attachments/assets/b3588782-33d4-4e11-8105-2f6b7335df6a
Previous behaviour:
https://github.com/user-attachments/assets/0e77808e-5895-45d4-b075-f299babecf2b
A few enhancements I'd still like to see: huh does a lot of redraws that cause rendering issues when not in alt screen. You come across that behaviour when resizing the window a lot while running an example (e.g. burger)