Support non-wrapping scrollable tabs with proper border styling

[mahdi4k]

Description

Currently, when Tabs.List contains many tab items, they wrap to multiple lines by default. While this can be handled with CSS (flex-wrap: nowrap and overflow-x: auto), the pseudo-element border (:before) on .mantine-Tabs-list doesn't work correctly with horizontal scrolling.

Current Behavior

When applying custom CSS to enable horizontal scrolling:

.mantine-Tabs-list {
  flex-wrap: nowrap;
  overflow-x: auto;
}

The :before pseudo-element border uses inset-inline-start and inset-inline-end which are positioned relative to the viewport/container edges, not the scrollable content. This causes the border to remain fixed while the tabs scroll horizontally.

Current CSS:

.m_576c9d4:before {
  content: "";
  position: absolute;
  border: 1px solid var(--tab-border-color);
  bottom: var(--tabs-list-line-bottom);
  inset-inline-start: var(--tabs-list-line-start);
  inset-inline-end: var(--tabs-list-line-end);
  top: var(--tabs-list-line-top);
}

Expected Behavior

When tabs overflow and scroll horizontally, the border should either:

1. Extend across the entire scrollable width of the content, OR
2. Provide a built-in prop like wrap={false} or scrollable that properly handles this scenario

Proposed Solution

Add a scrollable or wrap prop to the Tabs component that:

• Sets flex-wrap: nowrap and overflow-x: auto on Tabs.List
• Adjusts the pseudo-element positioning to work with scrollable content (perhaps using a different positioning strategy or a full-width element instead of absolute positioning)

Workaround

Currently, developers need to override both the flex behavior and pseudo-element styling, which is not straightforward.

Use Case

This is common in applications with many tabs, such as dashboards, multi-step forms, or navigation systems where wrapping would negatively impact UX.