feat(layout): fixes ui issues on smaller screens

e2e/nav.spec.ts

@@ -19,11 +19,11 @@ test.describe('nav', () => {
     await expect(page).toHaveURL(/\/bookmarks/);
   });
 
-  test.describe('switch to french', () => {
-    test('switch to French', async ({ page }) => {
+  test.describe('switch to language', () => {
+    test('switch language', async ({ page }) => {
       expect(await page.getByText('Posez une question')).toBeTruthy();
-      await page.getByText('Anglais').click();
-      expect(await page.getByText('English')).toBeTruthy();
+      await page.getByRole('combobox').selectOption('EN');
+      expect(await page.getByText('EN')).toBeTruthy();
       expect(await page.getByText('Ask a question')).toBeTruthy();
     });
   });

src/App.vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { RouterView } from 'vue-router';
 import AppHeader from '@/components/AppHeader.vue';
-import NavComponent from '@/components/NavComponent.vue';
+import NavComponent from '@/components/nav/NavComponent.vue';
 import FooterComponent from '@/components/FooterComponent.vue';
 import AppLayout from '@/components/AppLayout.vue';
 import SmallScreenPage from '@/views/SmallScreenPage.vue';

src/components/AppHeader.vue

@@ -1,38 +1,31 @@
 <template>
-  <div class="app-header">
-    <router-link to="/">
-      <img alt="logo" class="logo" src="@/assets/logo.png" />
-    </router-link>
-    <span class="is-title has-text-weight-semibold is-size-4 has-text-success ml-1">Beta</span>
-  </div>
+  <router-link class="app-header-link" to="/">
+    <div class="app-header">
+      <img alt="App large logo" class="logo" src="@/assets/logo.png" />
+
+      <span class="is-title has-text-weight-semibold has-text-success ml-1">Beta</span>
+    </div>
+  </router-link>
 </template>
 
 <style scoped>
 .app-header {
   margin: 1rem 0 1em 1rem;
   z-index: 1;
-  transition: height 0.5s;
+  display: flex;
+  margin-left: 2%;
+  margin-bottom: 0rem;
 }
 
-@media screen and (min-width: 576px) {
-  .logo {
-    width: 100%;
-    min-width: 4em;
-    max-height: 2em;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .logo {
-    font-size: 2rem;
-  }
+.logo {
+  height: 100%;
+  width: auto;
+  max-height: clamp(24px, 5vw, 3.5em);
 }
 
-@media screen and (min-width: 992px) {
-  .app-header {
-    display: flex;
-    margin-left: 2rem;
-    margin-bottom: 0rem;
+@media (max-width: 1600px) {
+  .app-header-link {
+    display: none;
   }
 }
 </style>

src/components/AppLayout.vue

@@ -46,38 +46,21 @@ const manageNavBarAnimations = () => {
   overflow: hidden;
   margin: 0;
 
-  display: grid;
-  grid-template-rows: 6.5rem auto;
-  grid-template-areas:
-    'header '
-    'main ';
-  transition: grid-template-rows 0.5s;
+  display: flex;
+  flex-direction: column;
+  gap: 0.05rem;
 }
 
 .header {
-  grid-area: header;
   display: flex;
 }
 
 .main {
-  grid-area: main;
   width: 100%;
   height: 100%;
   overflow: auto;
   scroll-behavior: smooth;
 }
-@media screen and (min-width: 576px) {
-  .appLayout {
-    grid-template-rows: 7rem auto;
-    grid-gap: 0.05rem;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .appLayout {
-    grid-template-rows: auto 1fr;
-  }
-}
 
 .wl-footer {
   background-color: var(--neutral-10);

src/components/HelpComponentContent.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import { ref, watchEffect, computed } from 'vue';
 
+interface StepContent {
+  title: string;
+  description: string;
+  image?: string;
+}
+
 const props = defineProps<{
-  stepsContent?: Record<string, string>[];
+  stepsContent?: StepContent[];
   modalState: boolean;
   toggleModal: () => void;
 }>();