fix(ui): align left padding across messages and input components

Remove right padding from content blocks and align input components
with message content by matching the border(1) + paddingLeft(2)
pattern used by renderContentBlock.
This commit is contained in:
Ed Zynda
2026-02-26 12:38:32 +03:00
parent ac6d7f8f53
commit 2f8be19c83
4 changed files with 23 additions and 19 deletions
+1 -1
View File
@@ -120,7 +120,7 @@ func renderContentBlock(content string, containerWidth int, options ...rendering
paddingTop: 1,
paddingBottom: 1,
paddingLeft: 2,
paddingRight: 2,
paddingRight: 0,
width: containerWidth,
}
+8 -5
View File
@@ -226,11 +226,13 @@ func (s *InputComponent) handleSubmit(value string) tea.Cmd {
// View implements tea.Model. Renders the title, textarea, autocomplete popup
// (if visible), and help text.
func (s *InputComponent) View() tea.View {
containerStyle := lipgloss.NewStyle().PaddingLeft(2)
containerStyle := lipgloss.NewStyle()
// PaddingLeft(3) aligns with message content: border(1) + paddingLeft(2).
titleStyle := lipgloss.NewStyle().
Foreground(lipgloss.Color("252")).
MarginBottom(1)
MarginBottom(1).
PaddingLeft(3)
inputBoxStyle := lipgloss.NewStyle().
Border(lipgloss.ThickBorder()).
@@ -239,8 +241,8 @@ func (s *InputComponent) View() tea.View {
BorderTop(false).
BorderBottom(false).
BorderForeground(lipgloss.Color("39")).
PaddingLeft(1).
Width(s.width - 2) // Account for container padding
PaddingLeft(2). // match message block paddingLeft
Width(s.width - 1) // full width minus left border
var view strings.Builder
view.WriteString(titleStyle.Render(s.title))
@@ -254,7 +256,8 @@ func (s *InputComponent) View() tea.View {
helpStyle := lipgloss.NewStyle().
Foreground(lipgloss.Color("240")).
MarginTop(1)
MarginTop(1).
PaddingLeft(3)
view.WriteString("\n")
view.WriteString(helpStyle.Render("enter submit • ctrl+j / alt+enter new line"))
+8 -7
View File
@@ -175,13 +175,13 @@ func (s *SlashCommandInput) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
// including the title, text area, autocomplete popup (when active), and help text.
// The view adapts based on whether single or multi-line input is detected.
func (s *SlashCommandInput) View() tea.View {
// Add left padding to entire component (2 spaces like other UI elements)
containerStyle := lipgloss.NewStyle().PaddingLeft(2)
containerStyle := lipgloss.NewStyle()
// Title
// PaddingLeft(3) aligns with message content: border(1) + paddingLeft(2).
titleStyle := lipgloss.NewStyle().
Foreground(lipgloss.Color("252")).
MarginBottom(1)
MarginBottom(1).
PaddingLeft(3)
// Input box with huh-like styling
inputBoxStyle := lipgloss.NewStyle().
@@ -191,8 +191,8 @@ func (s *SlashCommandInput) View() tea.View {
BorderTop(false).
BorderBottom(false).
BorderForeground(lipgloss.Color("39")).
PaddingLeft(1).
Width(s.width - 2) // Account for container padding
PaddingLeft(2). // match message block paddingLeft
Width(s.width - 1) // full width minus left border
// Build the view
var view strings.Builder
@@ -222,7 +222,8 @@ func (s *SlashCommandInput) View() tea.View {
// Add help text at bottom
helpStyle := lipgloss.NewStyle().
Foreground(lipgloss.Color("240")).
MarginTop(1)
MarginTop(1).
PaddingLeft(3)
helpText := "enter submit • ctrl+j / alt+enter new line"
+6 -6
View File
@@ -85,13 +85,13 @@ func (t *ToolApprovalInput) View() tea.View {
if t.done {
return tea.NewView("we are done")
}
// Add left padding to entire component (2 spaces like other UI elements)
containerStyle := lipgloss.NewStyle().PaddingLeft(2)
containerStyle := lipgloss.NewStyle()
// Title
// PaddingLeft(3) aligns with message content: border(1) + paddingLeft(2).
titleStyle := lipgloss.NewStyle().
Foreground(lipgloss.Color("252")).
MarginBottom(1)
MarginBottom(1).
PaddingLeft(3)
// Input box with huh-like styling
inputBoxStyle := lipgloss.NewStyle().
@@ -101,8 +101,8 @@ func (t *ToolApprovalInput) View() tea.View {
BorderTop(false).
BorderBottom(false).
BorderForeground(lipgloss.Color("39")).
PaddingLeft(1).
Width(t.width - 2) // Account for container padding
PaddingLeft(2). // match message block paddingLeft
Width(t.width - 1) // full width minus left border
// Style for the currently selected/highlighted option
selectedStyle := lipgloss.NewStyle().