Improve global layout structure and fix various styling issues #16

src/components/Projects.vue

@@ -1,6 +1,8 @@
 <template>
-  <h2 id="tabslist" class="sr-only">Projets</h2>
-  <Tabs :tabs="tabs" @update:currentTab="changeTab" />
+  <header class="flex">
+    <h2 id="tabslist" class="sr-only">Projets</h2>
+    <Tabs :tabs="tabs" @update:currentTab="changeTab" />
+  </header>
   <section
     v-if="currentTab === 'currentProjects'"
     id="projets-en-cours"

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;

src/components/inspirations/Selector.vue

@@ -44,15 +44,12 @@ function changeInspiration(inspiration) {
 #inspirations-dropdown {
   --row-gap: 0;
   align-items: flex-start;
-  position: absolute;
-  top: 0;
-  right: 0;
+  position: relative;
   background: var(--color-background);
   border-radius: var(--rounded-lg);
   height: 3.75rem;
   width: 20rem;
   padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
-  margin-bottom: var(--space-16);
 }
 #inspirations-dropdown::before {
   content: "";

src/components/project/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="flex | bg-white | rounded-2xl | p-8 mb-16">
+  <header class="flex | bg-white | rounded-2xl | p-8">
     <h1 class="font-serif | px-8">{{ title }}</h1>
     <button class="btn | ml-auto" disabled>Demander un RDV</button>
   </header>