From 1a52582edaa32d02e9241e91e0c72de3045ac0c1 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Thu, 4 Jun 2026 08:26:34 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui)=20:=20TabList=20=E2=80=94=20prop=20max?=
 =?UTF-8?q?Width=20(d=C3=A9faut=201100)=20pour=20le=20bloc=20d'onglets=20f?=
 =?UTF-8?q?en=C3=AAtr=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/malio/tab/TabList.test.ts | 11 +++++++++++
 app/components/malio/tab/TabList.vue     |  5 ++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/components/malio/tab/TabList.test.ts b/app/components/malio/tab/TabList.test.ts
index 12a90c0..a81026f 100644
--- a/app/components/malio/tab/TabList.test.ts
+++ b/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"]')
diff --git a/app/components/malio/tab/TabList.vue b/app/components/malio/tab/TabList.vue
index 46efbda..76adde3 100644
--- a/app/components/malio/tab/TabList.vue
+++ b/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<{