fix: background color rendering issues

Author: adamdotdevin

packages/tui/internal/components/chat/message.go

@@ -180,11 +180,13 @@ func renderContentBlock(content string, options ...renderingOption) string {
 		layout.Current.Container.Width,
 		align,
 		content,
+		lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 	)
 	content = lipgloss.PlaceHorizontal(
 		layout.Current.Viewport.Width,
 		lipgloss.Center,
 		content,
+		lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 	)
 	return content
 }
@@ -373,6 +375,7 @@ func renderToolInvocation(
 					lipgloss.Center,
 					lipgloss.Top,
 					body,
+					lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 				)
 			}
 		}
@@ -440,7 +443,12 @@ func renderToolInvocation(
 	}
 
 	content := style.Render(title)
-	content = lipgloss.PlaceHorizontal(layout.Current.Viewport.Width, lipgloss.Center, content)
+	content = lipgloss.PlaceHorizontal(
+		layout.Current.Viewport.Width,
+		lipgloss.Center,
+		content,
+		lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
+	)
 	if showResult && body != "" && error == "" {
 		content += "\n" + body
 	}

packages/tui/internal/components/chat/messages.go

@@ -275,9 +275,15 @@ func (m *messagesComponent) View() string {
 	if m.rendering {
 		return m.viewport.View()
 	}
+	t := theme.CurrentTheme()
 	return lipgloss.JoinVertical(
 		lipgloss.Left,
-		lipgloss.PlaceHorizontal(m.width, lipgloss.Center, m.header()),
+		lipgloss.PlaceHorizontal(
+			m.width,
+			lipgloss.Center,
+			m.header(),
+			lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
+		),
 		m.viewport.View(),
 	)
 }
@@ -346,13 +352,20 @@ func (m *messagesComponent) home() string {
 		lines = append(lines, "")
 	}
 
-	return lipgloss.Place(m.width, m.height, lipgloss.Center, lipgloss.Center,
+	t := theme.CurrentTheme()
+	return lipgloss.Place(
+		m.width,
+		m.height,
+		lipgloss.Center,
+		lipgloss.Center,
 		baseStyle.Width(lipgloss.Width(logoAndVersion)).Render(
 			lipgloss.JoinVertical(
 				lipgloss.Top,
 				lines...,
 			),
-		))
+		),
+		lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
+	)
 }
 
 func (m *messagesComponent) SetSize(width, height int) tea.Cmd {

packages/tui/internal/components/dialog/quit.go

@@ -3,6 +3,7 @@ package layout
 import (
 	tea "github.com/charmbracelet/bubbletea/v2"
 	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/sst/opencode/internal/theme"
 )
 
 type FlexDirection int
@@ -76,6 +77,7 @@ func (f *flexLayout) View() string {
 		return ""
 	}
 
+	t := theme.CurrentTheme()
 	views := make([]string, 0, len(f.panes))
 	for i, pane := range f.panes {
 		if pane == nil {
@@ -89,6 +91,7 @@ func (f *flexLayout) View() string {
 				paneWidth,
 				pane.Alignment(),
 				pane.View(),
+				lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 			)
 			views = append(views, view)
 		} else {
@@ -99,6 +102,7 @@ func (f *flexLayout) View() string {
 				lipgloss.Center,
 				pane.Alignment(),
 				pane.View(),
+				lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 			)
 			views = append(views, view)
 		}
@@ -160,14 +164,14 @@ func (f *flexLayout) SetSize(width, height int) tea.Cmd {
 
 	var cmds []tea.Cmd
 	currentX, currentY := 0, 0
-	
+
 	for i, pane := range f.panes {
 		if pane != nil {
 			paneWidth, paneHeight := f.calculatePaneSize(i)
-			
+
 			// Calculate actual position based on alignment
 			actualX, actualY := currentX, currentY
-			
+
 			if f.direction == FlexDirectionHorizontal {
 				// In horizontal layout, vertical alignment affects Y position
 				// (lipgloss.Center is used for vertical alignment in JoinHorizontal)
@@ -178,7 +182,7 @@ func (f *flexLayout) SetSize(width, height int) tea.Cmd {
 				if pane.MaxWidth() > 0 && contentWidth > pane.MaxWidth() {
 					contentWidth = pane.MaxWidth()
 				}
-				
+
 				switch pane.Alignment() {
 				case lipgloss.Center:
 					actualX = (f.width - contentWidth) / 2
@@ -188,16 +192,16 @@ func (f *flexLayout) SetSize(width, height int) tea.Cmd {
 					actualX = 0
 				}
 			}
-			
+
 			// Set position if the pane is a *container
 			if c, ok := pane.(*container); ok {
 				c.x = actualX
 				c.y = actualY
 			}
-			
+
 			cmd := pane.SetSize(paneWidth, paneHeight)
 			cmds = append(cmds, cmd)
-			
+
 			// Update position for next pane
 			if f.direction == FlexDirectionHorizontal {
 				currentX += paneWidth