Improve global layout structure and fix various styling issues #16

src/components/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <header role="tablist" aria-labelledby="tablist">
+  <div role="tablist" aria-labelledby="tablist">
     <!-- TODO: aria-selected et tabindex ne fonctionnent pas -->
     <button
       v-for="tab in tabs"
@@ -16,7 +16,7 @@
       <span class="label">{{ tab.label }}</span>
       <span class="count">{{ tab.count }}</span>
     </button>
-  </header>
+  </div>
 </template>
 
 <script setup>
@@ -36,18 +36,21 @@ function changeTab(tabId) {
 
 <style scoped>
 [role="tablist"] {
-  width: fit-content;
+  --tabs: 2;
+  --tab-w: 15rem; /* 240px */
+  width: 100%;
+  max-width: calc(var(--tabs) * var(--tab-w));
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  margin: 0 auto var(--space-32);
+  margin: 0 auto;
   border-radius: var(--rounded-md);
   background-color: var(--color-grey-200);
+  flex-shrink: 1;
 }
 
 [role="tab"] {
   --tab-h: 2.5rem;
-  --tab-min-w: 15rem; /* 240px */
   --tab-py: var(--space-8);
   --tab-px: var(--space-12);
   --tab-border-w: 4px;
@@ -64,9 +67,10 @@ function changeTab(tabId) {
   margin: 0;
   cursor: pointer;
   gap: var(--space-16);
-  min-width: var(--tab-min-w);
+  width: 100%;
   height: var(--tab-h);
   border: var(--tab-border-w) solid var(--color-grey-200);
+  flex-shrink: 1;
 }
 [role="tab"]:focus-visible {
   z-index: 20;