Textinput weirds out

[maxall41]

Im trying to create a dialog box with a text input but when i start typing in weirds out. See below

Screen.Recording.2022-02-27.at.6.23.10.PM.mov

Does anybody know why this is happening?
Here is my code:

package main

import (
	"fmt"
	"os"

	"github.com/charmbracelet/bubbles/list"
	tea "github.com/charmbracelet/bubbletea"
	"github.com/charmbracelet/lipgloss"
	browser "github.com/pkg/browser"
	"github.com/nathan-fiscaletti/consolesize-go"
	"github.com/charmbracelet/bubbles/textinput"
)

var docStyle = lipgloss.NewStyle().Margin(1, 2)

type item struct {
	title, desc, url string
}

func (i item) Title() string       { return i.title }
func (i item) URL() string       { return i.url }
func (i item) Description() string { return i.desc }
func (i item) FilterValue() string { return i.title }

type model struct {
	list list.Model
	urls []string
	primaryMode bool
	width int
	height int
	setupPointer int
	textInput textinput.Model
}

func (m model) Init() tea.Cmd {
	return nil
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.KeyMsg:
		if msg.String() == "ctrl+c" {
			return m, tea.Quit
		}
		if msg.String() == "enter" && m.primaryMode == true {
			browser.OpenURL(m.urls[m.list.Cursor()])
		}
	case tea.WindowSizeMsg:
		top, right, bottom, left := docStyle.GetMargin()
		m.list.SetSize(msg.Width-left-right, msg.Height-top-bottom)
	}
	cols, rows := consolesize.GetConsoleSize()
	m.width = cols
	m.height = rows
	var cmd tea.Cmd
	// m.list, cmd = m.list.Update(msg)
	m.textInput, cmd = m.textInput.Update(msg)
	return m, cmd
}

func (m model) View() string {
	if (m.primaryMode == true) {
		return docStyle.Render(m.list.View())
	} else {
		dialogBoxStyle := lipgloss.NewStyle().
			Border(lipgloss.RoundedBorder()).
			BorderForeground(lipgloss.Color("#874BFD")).
			Padding(1, 0).
			BorderTop(true).
			BorderLeft(true).
			BorderRight(true).
			BorderBottom(true)

		buttonStyle := lipgloss.NewStyle().
				Foreground(lipgloss.Color("#FFF7DB")).
				Background(lipgloss.Color("#888B7E")).
				Padding(0, 3).
				MarginTop(1)

		activeButtonStyle := buttonStyle.Copy().
					Foreground(lipgloss.Color("#FFF7DB")).
					Background(lipgloss.Color("#F25D94")).
					MarginRight(2).
					Underline(true)

		okButton := activeButtonStyle.Render("Confirm")
		cancelButton := buttonStyle.Render("Cancel")

		subtle  := lipgloss.AdaptiveColor{Light: "#D9DCCF", Dark: "#383838"}

		question := lipgloss.NewStyle().Width(50).Align(lipgloss.Center).Render("Enter the URL for the Dashman server:")
		buttons := lipgloss.JoinHorizontal(lipgloss.Top, okButton, cancelButton)
		ui := lipgloss.JoinVertical(lipgloss.Center, question, m.textInput.View(),buttons)

		dialog := lipgloss.Place(m.width, m.height,
			lipgloss.Center, lipgloss.Center,
			dialogBoxStyle.Render(ui),
			// lipgloss.WithWhitespaceChars("/"),
			lipgloss.WithWhitespaceForeground(subtle),
		)
		style := lipgloss.NewStyle()
		
		return style.Render(dialog + "\n\n")
	}
}

func main() {
	items := []list.Item{
		item{title: "Raspberry Pi’s", desc: "I have ’em all over my house"},
		item{title: "Nutella", desc: "It's good on toast"},
		item{title: "Bitter melon", desc: "It cools you down"},
		item{title: "Nice socks", desc: "And by that I mean socks without holes"},
	}

	itemURLs := []string{
		"https://example.com",
		"https://example.com",
		"https://example.com",
		"https://example.com",
	}

	ti := textinput.New()
	ti.Placeholder = "http://192.168.1.239:3000"
	ti.Focus()
	ti.CharLimit = 30
	ti.Width = 10

	m := model{list: list.New(items, list.NewDefaultDelegate(), 0, 0)}
	m.list.Title = "Apps"
	m.textInput = ti
	m.urls = itemURLs

	p := tea.NewProgram(m, tea.WithAltScreen())

	if err := p.Start(); err != nil {
		fmt.Println("Error running program:", err)
		os.Exit(1)
	}
}

[bashbunni]

Hey,
it looks like the vertical spacing in the dialog box is getting a bit messed up when View() gets called after the textinput updates.
I was able to get it fixed by changing return style.Render(dialog + "\n\n") to return style.Render(dialog)
These newlines are basically manually adding margins to the height.
Let me know if this helps!

[maxall41]

That fixes it thanks!