fix: setting width should wrap textinput and textarea bubbles

field_input.go

@@ -8,6 +8,7 @@ import (
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/huh/accessibility"
+	"github.com/charmbracelet/lipgloss"
 )
 
 // Input is a form input field.
@@ -258,6 +259,13 @@ func (i *Input) WithTheme(theme *Theme) Field {
 // WithWidth sets the width of the input field.
 func (i *Input) WithWidth(width int) Field {
 	i.width = width
+	frameSize := i.theme.Blurred.Base.GetHorizontalFrameSize()
+	promptWidth := lipgloss.Width(i.textinput.PromptStyle.Render(i.textinput.Prompt))
+	titleWidth := lipgloss.Width(i.theme.Focused.Title.Render(i.title))
+	i.textinput.Width = width - frameSize - promptWidth - 1
+	if i.inline {
+		i.textinput.Width -= titleWidth
+	}
 	return i
 }
 

field_text.go

@@ -299,6 +299,7 @@ func (t *Text) WithAccessible(accessible bool) Field {
 // WithWidth sets the width of the text field.
 func (t *Text) WithWidth(width int) Field {
 	t.width = width
+	t.textarea.SetWidth(width - t.theme.Blurred.Base.GetHorizontalFrameSize())
 	return t
 }
 

form.go

@@ -59,8 +59,6 @@ type Form struct {
 	keymap *KeyMap
 }
 
-const defaultWidth = 80
-
 // NewForm returns a form with the given groups and default themes and
 // keybindings.
 //
@@ -75,7 +73,7 @@ func NewForm(groups ...*Group) *Form {
 		paginator: p,
 		theme:     ThemeCharm(),
 		keymap:    NewDefaultKeyMap(),
-		width:     defaultWidth,
+		width:     0,
 		results:   make(map[string]any),
 	}
 
@@ -324,6 +322,13 @@ func (f *Form) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	group := f.groups[page]
 
 	switch msg := msg.(type) {
+	case tea.WindowSizeMsg:
+		if f.width > 0 {
+			break
+		}
+		for _, group := range f.groups {
+			group.WithWidth(msg.Width)
+		}
 	case tea.KeyMsg:
 		switch {
 		case key.Matches(msg, f.keymap.Quit):