How to "cut" a component from the left side?

[debevv]

Hi, I'm trying to implement horizontally scrolling tabs.

The way I style a single tab is the following:

var (
	tabWidth         = 17
	tabTitleWidthMax = tabWidth - 4

	tabBorder = lipgloss.Border{
		Top:         "─",
		Bottom:      "─",
		Left:        "│",
		Right:       "│",
		TopLeft:     "┌",
		TopRight:    "┐",
		BottomLeft:  "┴",
		BottomRight: "┴",
	}

	tabStyle = lipgloss.NewStyle().
			Border(tabBorder, true).
			BorderForeground(lipgloss.Color(store.Get().GetTheme().Tab.ActiveBorder)).
			Padding(0, 1)
)

I concat all the visible ones in a row like this, calculating the remaining available width of the container so the last tab is "cut" if there isn't enough space to render it completely:

for tab := range m.tabs {
    maxWidth := min(m.style.GetWidth()-rendered, tabWidth)
    r = tabStyle.MaxWidth(maxWidth).Render(name)
    tabs = append(tabs, r)
    rendered += maxWidth
}

row := lipgloss.JoinHorizontal(
    lipgloss.Top,
    tabs...,
)

Which results in this rendering:

As you can see the second tab is cut on the right because there wasn't enough space to render it fully, and that's fine.

But now, when i scroll the tabs to the left by some chars, in order to show the second tab completely, the first one should be cut from left side. How can i do this? Looks like lipgloss always starts rendering from the left, and then stopping when there is not enough space. I tried to set negative padding to the first tab or horizontally aligning it to the right, but it doesn't work.