fix: make the login screen layout adapt to resizes

ui/app/app.go

@@ -78,6 +78,7 @@ func (s State) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			Width(msg.Width).
 			Height(msg.Height)
 
+		s.UI.Login.SetSize(msg.Width, msg.Height)
 		s.UI.MainScreen.SetSize(msg.Width, msg.Height)
 
 		return s, nil

ui/login/login.go

@@ -28,18 +28,24 @@ import (
 )
 
 type State struct {
-	FocusIndex int
-	Inputs     []textinput.Model
-	TLS        bool
+	FocusIndex      int
+	Inputs          []textinput.Model
+	TLS             bool
+	DialogStyle     lipgloss.Style
+	WelcomeMsgStyle lipgloss.Style
+	Style           lipgloss.Style
 }
 
 func NewLogin() State {
-	ls := State{
-		Inputs: make([]textinput.Model, 5),
+	state := State{
+		Inputs:          make([]textinput.Model, 5),
+		DialogStyle:     DialogStyle.Copy(),
+		WelcomeMsgStyle: WelcomeMsgStyle.Copy(),
+		Style:           ui.MainStyle.Copy(),
 	}
 
 	var t textinput.Model
-	for i := range ls.Inputs {
+	for i := range state.Inputs {
 		t = textinput.New()
 		t.CursorStyle = ui.CursorStyle
 		t.Prompt = "| "
@@ -66,10 +72,10 @@ func NewLogin() State {
 			t.EchoCharacter = '•'
 		}
 
-		ls.Inputs[i] = t
+		state.Inputs[i] = t
 	}
 
-	return ls
+	return state
 }
 
 func (s State) Update(msg tea.Msg) (State, tea.Cmd) {
@@ -78,7 +84,7 @@ func (s State) Update(msg tea.Msg) (State, tea.Cmd) {
 		key := msg.String()
 		switch key {
 		case " ", "enter":
-			// run the newClient cmd when pressing "enter" while focused on the connect button
+			// run the Connect cmd when pressing "enter" while focused on the connect button
 			if key == "enter" && s.FocusIndex == len(s.Inputs)+1 {
 				return s, cmds.Connect
 			}
@@ -134,6 +140,14 @@ func (s *State) updateInputs(msg tea.Msg) tea.Cmd {
 	return tea.Batch(cmds...)
 }
 
+func (s *State) SetSize(width, height int) {
+	s.DialogStyle = s.DialogStyle.Copy().Width(width - s.DialogStyle.GetHorizontalFrameSize())
+	s.DialogStyle = s.DialogStyle.Copy().Height(height*5/10 - s.DialogStyle.GetVerticalFrameSize())
+
+	s.WelcomeMsgStyle = s.WelcomeMsgStyle.Copy().Width(width)
+	s.WelcomeMsgStyle = s.WelcomeMsgStyle.Copy().Height(height * 5 / 10)
+}
+
 func (s State) View() string {
 	var sb strings.Builder
 
@@ -167,9 +181,7 @@ func (s State) View() string {
 	}
 	fmt.Fprintf(&sb, "\n%s\n", *button)
 
-	screen := lipgloss.JoinVertical(0, WelcomeMsgStyle.Render(WelcomeMsg), ui.DialogStyle.Render(sb.String()))
+	screen := lipgloss.JoinVertical(lipgloss.Center, s.WelcomeMsgStyle.Render(WelcomeMsg), s.DialogStyle.Render(sb.String()))
 
-	final := lipgloss.Place(ui.MainStyle.GetWidth(), ui.MainStyle.GetHeight(), lipgloss.Center, lipgloss.Top, screen)
-
-	return ui.MainStyle.Render(final)
+	return ui.MainStyle.Render(screen)
 }

ui/login/styles.go

@@ -16,7 +16,9 @@
 
 package login
 
-import "github.com/charmbracelet/lipgloss"
+import (
+	"github.com/charmbracelet/lipgloss"
+)
 
 const WelcomeMsg = `                                        
                                         
@@ -33,19 +35,15 @@ const WelcomeMsg = `
 `
 
 var (
-	WelcomeMsgStyle = lipgloss.NewStyle().
-			Padding(0, 5).
-			MarginBottom(5)
-
 	FocusedButton = lipgloss.NewStyle().
 			Background(lipgloss.Color("105")).
-			Foreground(lipgloss.Color("255")).
+			Foreground(lipgloss.Color("#000")).
 			MarginTop(1).
 			Padding(0, 2).
 			Align(lipgloss.Center).
 			Render("Connect")
 	BlurredButton = lipgloss.NewStyle().
-			Background(lipgloss.Color("#809070")).
+			Background(lipgloss.Color("#505050")).
 			Foreground(lipgloss.Color("#EEEEEE")).
 			MarginTop(1).
 			Padding(0, 2).
@@ -71,4 +69,10 @@ var (
 				Foreground(lipgloss.Color("#EEEEEE")).
 				MarginTop(1).
 				Render("[x] Enable TLS")
+
+	DialogStyle = lipgloss.NewStyle().
+			Align(lipgloss.Center)
+
+	WelcomeMsgStyle = lipgloss.NewStyle().
+			Align(lipgloss.Center)
 )

ui/styles.go

@@ -23,13 +23,6 @@ var (
 			Width(0).
 			Height(0)
 
-	DialogStyle = lipgloss.NewStyle().
-			Border(lipgloss.RoundedBorder(), true).
-			Align(lipgloss.Center).
-			Width(50).
-			Padding(3, 6).
-			BorderForeground(lipgloss.Color("105"))
-
 	CursorStyle  = lipgloss.NewStyle().Foreground(lipgloss.Color("105"))
 	FocusedStyle = lipgloss.NewStyle().Foreground(lipgloss.Color("105"))
 	NoStyle      = lipgloss.NewStyle()