fix(tui): overlay border backgrounds

4 files changed, 24 insertions, 45 deletions

diff --git a/packages/tui/internal/components/chat/editor.go b/packages/tui/internal/components/chat/editor.go
index 7cd16085d..7fb034b19 100644
--- a/packages/tui/internal/components/chat/editor.go
+++ b/packages/tui/internal/components/chat/editor.go
@@ -110,9 +110,6 @@ func (m *editorComponent) Content() string {
 		PaddingTop(1).
 		PaddingBottom(1).
 		Background(t.BackgroundElement()).
-		Border(lipgloss.ThickBorder(), false, true).
-		BorderForeground(t.BackgroundElement()).
-		BorderBackground(t.Background()).
 		Render(textarea)
 
 	hint := base("enter") + muted(" send   ")
diff --git a/packages/tui/internal/components/dialog/complete.go b/packages/tui/internal/components/dialog/complete.go
index ba99e7f04..e73afed01 100644
--- a/packages/tui/internal/components/dialog/complete.go
+++ b/packages/tui/internal/components/dialog/complete.go
@@ -6,7 +6,6 @@ import (
 	"github.com/charmbracelet/bubbles/v2/key"
 	"github.com/charmbracelet/bubbles/v2/textarea"
 	tea "github.com/charmbracelet/bubbletea/v2"
-	"github.com/charmbracelet/lipgloss/v2"
 	"github.com/sst/opencode/internal/app"
 	"github.com/sst/opencode/internal/components/list"
 	"github.com/sst/opencode/internal/styles"
@@ -203,13 +202,6 @@ func (c *completionDialogComponent) View() string {
 
 	return baseStyle.Padding(0, 0).
 		Background(t.BackgroundElement()).
-		Border(lipgloss.ThickBorder()).
-		BorderTop(false).
-		BorderBottom(false).
-		BorderRight(true).
-		BorderLeft(true).
-		BorderBackground(t.Background()).
-		BorderForeground(t.BackgroundElement()).
 		Width(c.width).
 		Render(c.list.View())
 }
diff --git a/packages/tui/internal/components/modal/modal.go b/packages/tui/internal/components/modal/modal.go
index b2b59a4b2..afb67a959 100644
--- a/packages/tui/internal/components/modal/modal.go
+++ b/packages/tui/internal/components/modal/modal.go
@@ -100,9 +100,9 @@ func (m *Modal) Render(contentView string, background string) string {
 	if m.title != "" {
 		titleStyle := baseStyle.
 			Foreground(t.Primary()).
-			Bold(true)
+			Bold(true).
+			Padding(0, 1)
 
-		// titleView := titleStyle.Render(m.title)
 		escStyle := baseStyle.Foreground(t.TextMuted()).Bold(false)
 		escText := escStyle.Render("esc")
 
@@ -123,14 +123,7 @@ func (m *Modal) Render(contentView string, background string) string {
 		PaddingTop(1).
 		PaddingBottom(1).
 		PaddingLeft(2).
-		PaddingRight(2).
-		BorderStyle(lipgloss.ThickBorder()).
-		BorderLeft(true).
-		BorderRight(true).
-		BorderLeftForeground(t.BackgroundSubtle()).
-		BorderLeftBackground(t.Background()).
-		BorderRightForeground(t.BackgroundSubtle()).
-		BorderRightBackground(t.Background())
+		PaddingRight(2)
 
 	modalView := modalStyle.
 		Width(outerWidth).
@@ -150,5 +143,7 @@ func (m *Modal) Render(contentView string, background string) string {
 		row,
 		modalView,
 		background,
+		layout.WithOverlayBorder(),
+		layout.WithOverlayBorderColor(t.Primary()),
 	)
 }
diff --git a/packages/tui/internal/components/toast/toast.go b/packages/tui/internal/components/toast/toast.go
index 6612b8e52..09b3c6288 100644
--- a/packages/tui/internal/components/toast/toast.go
+++ b/packages/tui/internal/components/toast/toast.go
@@ -93,12 +93,7 @@ func (tm *ToastManager) renderSingleToast(toast Toast) string {
 	baseStyle := styles.BaseStyle().
 		Background(t.BackgroundElement()).
 		Foreground(t.Text()).
-		Padding(1, 2).
-		BorderStyle(lipgloss.ThickBorder()).
-		BorderBackground(t.Background()).
-		BorderForeground(toast.Color).
-		BorderLeft(true).
-		BorderRight(true)
+		Padding(1, 2)
 
 	maxWidth := max(40, layout.Current.Viewport.Width/3)
 	contentMaxWidth := max(maxWidth-6, 20)
@@ -137,9 +132,7 @@ func (tm *ToastManager) View() string {
 		toastViews = append(toastViews, toastView+"\n")
 	}
 
-	t := theme.CurrentTheme()
-	content := lipgloss.JoinVertical(lipgloss.Right, toastViews...)
-	return lipgloss.NewStyle().Background(t.Background()).Render(content)
+	return strings.Join(toastViews, "\n")
 }
 
 // RenderOverlay renders the toasts as an overlay on the given background
@@ -151,38 +144,40 @@ func (tm *ToastManager) RenderOverlay(background string) string {
 	bgWidth := lipgloss.Width(background)
 	bgHeight := lipgloss.Height(background)
 	result := background
-	
+
 	// Start from top with 2 character padding
 	currentY := 2
-	
+
 	// Render each toast individually
 	for _, toast := range tm.toasts {
 		// Render individual toast
 		toastView := tm.renderSingleToast(toast)
 		toastWidth := lipgloss.Width(toastView)
 		toastHeight := lipgloss.Height(toastView)
-		
+
 		// Position at top-right with 2 character padding from right edge
-		x := bgWidth - toastWidth - 2
-		
-		// Ensure we don't go negative
-		if x < 0 {
-			x = 0
-		}
-		
+		x := max(bgWidth-toastWidth-4, 0)
+
 		// Check if toast fits vertically
-		if currentY + toastHeight > bgHeight - 2 {
+		if currentY+toastHeight > bgHeight-2 {
 			// No more room for toasts
 			break
 		}
-		
+
 		// Place this toast
-		result = layout.PlaceOverlay(x, currentY, toastView, result)
-		
+		result = layout.PlaceOverlay(
+			x,
+			currentY,
+			toastView,
+			result,
+			layout.WithOverlayBorder(),
+			layout.WithOverlayBorderColor(toast.Color),
+		)
+
 		// Move down for next toast (add 1 for spacing between toasts)
 		currentY += toastHeight + 1
 	}
-	
+
 	return result
 }