Fix scrollbar rendering in web terminals

Replace ⎪ (U+23AA CURLY BRACKET EXTENSION) with │ (U+2502 BOX DRAWINGS LIGHT VERTICAL) for both the scrollbar track and thumb characters. Remove bold styling from the thumb, differentiating it from the track by color only.

The ⎪ character rendered poorly in web terminals (ghostty-web via tmux), and bold styling caused the glyph to appear shorter than the track. Using │ with color-only differentiation fixes both issues.

Assisted-By: docker-agent

Author: dgageot

pkg/tui/components/scrollbar/scrollbar.go

@@ -34,8 +34,8 @@ type Model struct {
 func New() *Model {
 	return &Model{
 		width:     Width,
-		trackChar: "⎪",
-		thumbChar: "⎪",
+		trackChar: "│",
+		thumbChar: "│",
 	}
 }
 

pkg/tui/styles/styles.go

@@ -404,8 +404,8 @@ var (
 // Scrollbar
 var (
 	TrackStyle       = lipgloss.NewStyle().Foreground(BorderSecondary)
-	ThumbStyle       = lipgloss.NewStyle().Foreground(Info).Background(BackgroundAlt).Bold(true)
-	ThumbActiveStyle = lipgloss.NewStyle().Foreground(White).Background(BackgroundAlt).Bold(true)
+	ThumbStyle       = lipgloss.NewStyle().Foreground(Info).Background(BackgroundAlt)
+	ThumbActiveStyle = lipgloss.NewStyle().Foreground(White).Background(BackgroundAlt)
 )
 
 // Resize Handle Style

pkg/tui/styles/theme.go

@@ -1161,8 +1161,8 @@ func rebuildStyles() {
 
 	// Scrollbar styles
 	TrackStyle = lipgloss.NewStyle().Foreground(BorderSecondary)
-	ThumbStyle = lipgloss.NewStyle().Foreground(Info).Background(BackgroundAlt).Bold(true)
-	ThumbActiveStyle = lipgloss.NewStyle().Foreground(White).Background(BackgroundAlt).Bold(true)
+	ThumbStyle = lipgloss.NewStyle().Foreground(Info).Background(BackgroundAlt)
+	ThumbActiveStyle = lipgloss.NewStyle().Foreground(White).Background(BackgroundAlt)
 
 	// Resize handle styles
 	ResizeHandleStyle = BaseStyle.Foreground(BorderSecondary)