app/components/malio/tab/TabList.test.ts

@@ -16,6 +16,7 @@ type TabListProps = {
   modelValue?: string
   id?: string
   maxVisibleTabs?: number
+  maxWidth?: number
 }
 
 const TabListForTest = TabList as DefineComponent<TabListProps>
@@ -198,6 +199,16 @@ describe('MalioTabList — fenêtrage maxVisibleTabs', () => {
     {key: 't7', label: 'Tab 7'},
   ]
 
+  it('applies the default maxWidth (1100px) on the tabs container when windowed', () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
+    expect(wrapper.find('[role="tablist"]').attributes('style')).toContain('max-width: 1100px')
+  })
+
+  it('applies a custom maxWidth on the tabs container', () => {
+    const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5, maxWidth: 1200})
+    expect(wrapper.find('[role="tablist"]').attributes('style')).toContain('max-width: 1200px')
+  })
+
   it('renders only maxVisibleTabs buttons and disables prev at start', () => {
     const wrapper = mountComponent({tabs: sevenTabs, maxVisibleTabs: 5})
     const buttons = wrapper.findAll('[role="tab"]')

app/components/malio/tab/TabList.vue

@@ -17,7 +17,8 @@
 
       <div
         role="tablist"
-        class="flex flex-1 max-w-[1200px] justify-center gap-[60px]"
+        class="flex flex-1 justify-center gap-[60px]"
+        :style="{ maxWidth: `${maxWidth}px` }"
       >
         <button
           v-for="tab in visibleTabs"
@@ -132,10 +133,12 @@ const props = withDefaults(defineProps<{
   modelValue?: string
   id?: string
   maxVisibleTabs?: number
+  maxWidth?: number
 }>(), {
   modelValue: undefined,
   id: '',
   maxVisibleTabs: undefined,
+  maxWidth: 1100,
 })
 
 const emit = defineEmits<{