Tab width top border

[manus-ko]

Following the tabs example, If a fixed width is used with less tabs

doc.WriteString(windowStyle.Width(100).Render(m.TabContent[m.activeTab]))

The top border is missing. How to fix this?

[semihbkgr]

Hi @cksc123

You can fix it by adding some vertical lines to the row variable, which is created by row := lipgloss.JoinHorizontal(lipgloss.Top, renderedTabs...).

Here’s a fix for your case, where WIDTH is the desired value.

func (m model) View() string {
	doc := strings.Builder{}

	var renderedTabs []string

	for i, t := range m.Tabs {
		var style lipgloss.Style
		isFirst, isLast, isActive := i == 0, i == len(m.Tabs)-1, i == m.activeTab
		if isActive {
			style = activeTabStyle
		} else {
			style = inactiveTabStyle
		}
		border, _, _, _, _ := style.GetBorder()
		if isFirst && isActive {
			border.BottomLeft = "│"
		} else if isFirst && !isActive {
			border.BottomLeft = "├"
		} else if isLast && isActive {
			border.BottomRight = "└"
		} else if isLast && !isActive {
			border.BottomRight = "┴"
		}
		style = style.Border(border)
		renderedTabs = append(renderedTabs, style.Render(t))
	}

	extend := WIDTH - lipgloss.Width(lipgloss.JoinHorizontal(lipgloss.Top, renderedTabs...))
	if extend > 0 {
		complementaryRow := lipgloss.NewStyle().Foreground(highlightColor).Render("\n\n" + strings.Repeat("─", extend-1) + "┐")
		renderedTabs = append(renderedTabs, complementaryRow)
	}
	row := lipgloss.JoinHorizontal(lipgloss.Top, renderedTabs...)
	doc.WriteString(row)
	doc.WriteString("\n")
	doc.WriteString(windowStyle.Width((lipgloss.Width(row) - windowStyle.GetHorizontalFrameSize())).Render(m.TabContent[m.activeTab]))
	return docStyle.Render(doc.String())
}

[dawkrish]

Shouldn't this issue be closed ?!