mirror of
https://github.com/mark3labs/kit.git
synced 2026-06-14 03:30:26 +00:00
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:
@@ -120,7 +120,7 @@ func renderContentBlock(content string, containerWidth int, options ...rendering
|
||||
paddingTop: 1,
|
||||
paddingBottom: 1,
|
||||
paddingLeft: 2,
|
||||
paddingRight: 2,
|
||||
paddingRight: 0,
|
||||
width: containerWidth,
|
||||
}
|
||||
|
||||
|
||||
@@ -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"))
|
||||
|
||||
@@ -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"
|
||||
|
||||
|
||||
@@ -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().
|
||||
|
||||
Reference in New Issue
Block a user