From 2ea59a47e60a17fdaf7300e65a95462ca9bbd22f Mon Sep 17 00:00:00 2001
From: Noor A <Noor@MacBook-Pro-de-CRI.local>
Date: Wed, 7 Oct 2026 18:28:32 +0200
Subject: [PATCH 1/4] fix(filters): persistent filter panel, clearer header and
 search box

- panel open state, expanded sections and source categories live in the filters store so they survive Chat <-> Search switches
- header: title/chevron as a button, status line with count + clear all always visible; pills hidden on phones when collapsed
- filters panel above results on mobile Search (ColumnTemplate filtersFirst prop)
- clear-search as a Bulma delete in the text box corner

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 e2e/search.spec.ts                            |   4 +-
 src/components/ColumnTemplate.vue             |   9 +-
 src/components/FiltersComponent.vue           | 170 ++++++++++++++----
 src/components/TextAreaComponent.vue          |   4 +-
 .../__snapshots__/QandA.spec.ts.snap          |  49 ++---
 src/components/dropdowns/SourcesSelector.vue  |   3 +-
 src/localisation/en.ts                        |   2 +
 src/localisation/fr.ts                        |   2 +
 src/stores/filters.ts                         |  11 +-
 src/views/SearchSDG.vue                       |  27 ++-
 10 files changed, 207 insertions(+), 74 deletions(-)

diff --git a/e2e/search.spec.ts b/e2e/search.spec.ts
index 9b931cd..9fd0fb4 100644
--- a/e2e/search.spec.ts
+++ b/e2e/search.spec.ts
@@ -38,7 +38,9 @@ test.describe('search', () => {
 
     test('should select a source', async ({ page }) => {
       await page.getByText('Fake-Collection').click();
-      await expect(page.getByText('fake collection x')).toBeVisible();
+      // selected pill + its remove (×) button, labelled "Effacer"
+      await expect(page.getByText('fake collection')).toBeVisible();
+      await expect(page.getByRole('button', { name: 'Effacer', exact: true })).toBeVisible();
       await expect(page.getByLabel('fake-collection').locator('span')).toBeChecked();
     });
   });
diff --git a/src/components/ColumnTemplate.vue b/src/components/ColumnTemplate.vue
index bbbde1b..b83b527 100644
--- a/src/components/ColumnTemplate.vue
+++ b/src/components/ColumnTemplate.vue
@@ -4,6 +4,9 @@ import SidePanelIcon from '@/components/icons/SidePanelIcon.vue';
 
 import { ref, type VNodeRef } from 'vue';
 
+// filtersFirst: on narrow screens put the right panel above the content instead of below it
+defineProps<{ filtersFirst?: boolean }>();
+
 const scrollerRef = ref<VNodeRef | null>(null);
 const isOpen = ref(true);
 
@@ -12,7 +15,7 @@ const toggleOpen = () => {
 };
 </script>
 <template>
-  <div class="gridy-template">
+  <div class="gridy-template" :class="{ 'filters-first': filtersFirst }">
     <div class="panely left scroll">
       <slot name="left-panel"></slot>
     </div>
@@ -72,6 +75,10 @@ const toggleOpen = () => {
   .left {
     height: auto;
   }
+
+  .filters-first > .right {
+    order: -1;
+  }
 }
 
 @media (min-width: 992px) {
diff --git a/src/components/FiltersComponent.vue b/src/components/FiltersComponent.vue
index 69a2307..4a6d93f 100644
--- a/src/components/FiltersComponent.vue
+++ b/src/components/FiltersComponent.vue
@@ -8,7 +8,7 @@ import SourcesSelector from '@/components/dropdowns/SourcesSelector.vue';
 import LanguagesSelector from '@/components/dropdowns/LanguagesSelector.vue';
 import { useFiltersStore } from '@/stores/filters';
 import { useSourcesStore } from '@/stores/sources';
-import { ref, watch, toRefs } from 'vue';
+import { computed, watch, toRefs } from 'vue';
 
 const props = defineProps<{
   shouldClose?: boolean;
@@ -17,33 +17,54 @@ const props = defineProps<{
 const sourcesStore = useSourcesStore();
 const { shouldClose } = toRefs(props);
 
-const hideFilters = ref(false);
+const filters = useFiltersStore();
+const hideFilters = computed(() => !filters.panelOpen);
 watch(shouldClose, (close) => {
   if (close) {
-    hideFilters.value = close;
+    filters.panelOpen = false;
   }
 });
 
-const filters = useFiltersStore();
-const toggleFilters = () => (hideFilters.value = !hideFilters.value);
+const toggleFilters = () => (filters.panelOpen = !filters.panelOpen);
+const syncSection = (key: 'sources' | 'sdgs' | 'languages', e: Event) =>
+  (filters.openSections[key] = (e.target as HTMLDetailsElement).open);
+
+const activeCount = computed(
+  () => filters.sourcesFilters.length + filters.sdgFilters.length + filters.languageFilters.length
+);
 
 const clearFilters = () => {
   filters.handleResetFilters();
 };
 </script>
 <template>
-  <div
-    class="is-clickable is-flex is-align-items-center is-align-content-center mt-4 mb-5"
-    @click="toggleFilters"
-  >
-    <FilterSettingIcon class="mr-4" />
-    <span class="is-flex is-align-items-center is-size-6">{{ $t('searchFilters') }}</span>
-    <div class="chevron-icon">
-      <ChevronUpIcon class="ml-2" v-if="!hideFilters" />
-      <ChevronDownIcon class="ml-2" v-else />
-    </div>
+  <!-- two-line header (like a list item with a leading icon): the icon spans and centres on
+       title + status line; the status line stays outside the collapsible part so count + clear are always visible -->
+  <div class="filters-head">
+    <FilterSettingIcon class="head-icon" aria-hidden="true" @click="toggleFilters" />
+    <button
+      type="button"
+      class="filters-toggle"
+      :aria-expanded="!hideFilters"
+      @click="toggleFilters"
+    >
+      <span>{{ $t('searchFilters') }}</span>
+      <ChevronUpIcon class="chevron-icon" v-if="!hideFilters" />
+      <ChevronDownIcon class="chevron-icon" v-else />
+    </button>
+    <p class="status-line">
+      <template v-if="filters.hasFilters">
+        <span>{{ $t('filtersSelected', activeCount) }}</span>
+        <span aria-hidden="true">·</span>
+        <button class="remove-all" :aria-label="$t('clearFilters')" @click="clearFilters">
+          {{ $t('removeAll') }}
+        </button>
+      </template>
+      <span v-else class="has-text-grey">{{ $t('noFiltersSelected') }}</span>
+    </p>
   </div>
-  <div v-if="filters.hasFilters" class="is-flex">
+  <!-- phones: when the panel is collapsed the status line is the summary, the pills would eat the screen -->
+  <div v-if="filters.hasFilters" class="is-flex pills" :class="{ 'pills-collapsed': hideFilters }">
     <div class="is-flex is-flex-direction-column">
       <div class="is-flex flex-wrap selection mb-1" v-if="filters.sourcesFilters.length">
         <p>{{ $t('sources') }}{{ $t(':') }}</p>
@@ -55,7 +76,13 @@ const clearFilters = () => {
           :content="`${$t(`corpus.${filter}`, `${filter.replace('-', ' ')}`)}`"
         >
           <template #actions>
-            <span class="is-clickable" @click="filters.handleSourcesFilterChange(filter)"> x </span>
+            <button
+              class="remove-pill"
+              :aria-label="$t('removeSelection')"
+              @click="filters.handleSourcesFilterChange(filter)"
+            >
+              ×
+            </button>
           </template>
         </GenericPillComponent>
       </div>
@@ -69,7 +96,13 @@ const clearFilters = () => {
           :content="filter.toString()"
         >
           <template #actions>
-            <span class="is-clickable" @click="filters.handleSdgFilterChange(filter)"> x </span>
+            <button
+              class="remove-pill"
+              :aria-label="$t('removeSelection')"
+              @click="filters.handleSdgFilterChange(filter)"
+            >
+              ×
+            </button>
           </template>
         </GenericPillComponent>
       </div>
@@ -83,32 +116,44 @@ const clearFilters = () => {
           :content="$t(`lang.${filter}`, `${filter}`)"
         >
           <template #actions>
-            <span class="is-clickable" @click="filters.handleLanguageFilterChange(filter)">
-              x
-            </span>
+            <button
+              class="remove-pill"
+              :aria-label="$t('removeSelection')"
+              @click="filters.handleLanguageFilterChange(filter)"
+            >
+              ×
+            </button>
           </template>
         </GenericPillComponent>
       </div>
     </div>
-    <p class="ml-auto mr-6 remove-all" @click="clearFilters">{{ $t('removeAll') }}</p>
   </div>
-  <p v-else>
-    <span class="has-text-grey">{{ $t('noFiltersSelected') }}</span>
-  </p>
   <div :class="{ hide: hideFilters }" class="pr-5 filters">
-    <details class="filter-section" open>
+    <details
+      class="filter-section"
+      :open="filters.openSections.sources"
+      @toggle="syncSection('sources', $event)"
+    >
       <summary>{{ $t('sources') }}</summary>
       <div class="filter-options">
         <SourcesSelector :availableSources="sourcesStore.sourcesList || {}" />
       </div>
     </details>
-    <details class="filter-section" open>
+    <details
+      class="filter-section"
+      :open="filters.openSections.sdgs"
+      @toggle="syncSection('sdgs', $event)"
+    >
       <summary>{{ $t('sdgsAcronym') }}</summary>
       <div class="filter-options">
         <SDGSelector />
       </div>
     </details>
-    <details class="filter-section" open>
+    <details
+      class="filter-section"
+      :open="filters.openSections.languages"
+      @toggle="syncSection('languages', $event)"
+    >
       <summary>{{ $t('languages') }}</summary>
       <div class="filter-options">
         <LanguagesSelector :availableLanguages="filters.languageList" />
@@ -118,20 +163,79 @@ const clearFilters = () => {
 </template>
 
 <style scoped>
+.remove-pill {
+  all: unset;
+  cursor: pointer;
+  margin-left: 0.25rem;
+  font-size: 1rem;
+  line-height: 1;
+}
+.remove-pill:focus-visible {
+  outline: 2px solid currentColor;
+}
 .selection {
   flex-wrap: wrap;
 }
-.chevron-icon {
-  height: 1.5rem;
+.filters-head {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 0.75rem;
+  row-gap: 0.125rem;
+  align-items: center;
+  margin: 1rem 0;
+}
+.head-icon {
+  grid-row: 1 / span 2;
   width: 1.5rem;
+  height: 1.5rem;
+  cursor: pointer;
+}
+.filters-toggle {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+}
+/* desktop: keep clear of the sidebar open/close button pinned to the panel's top-right */
+@media (min-width: 992px) {
+  .filters-toggle {
+    max-width: calc(100% - 4rem);
+  }
+}
+.chevron-icon {
+  flex-shrink: 0;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 .remove-all {
+  all: unset;
   cursor: pointer;
-  color: var(--primary-60);
-  font-weight: bold;
+  color: var(--primary-dark);
   font-size: 0.875rem;
-  width: 6rem;
   white-space: nowrap;
+  &:hover,
+  &:focus-visible {
+    text-decoration: underline;
+  }
+}
+/* sits in the grid's second column, under the "Search filters" label, so it reads as its subtitle */
+.status-line {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+@media (max-width: 991px) {
+  .pills-collapsed {
+    display: none !important;
+  }
 }
 .filters {
   max-height: 90%;
diff --git a/src/components/TextAreaComponent.vue b/src/components/TextAreaComponent.vue
index 6e49eac..752dab2 100644
--- a/src/components/TextAreaComponent.vue
+++ b/src/components/TextAreaComponent.vue
@@ -26,11 +26,13 @@ defineEmits(['update:modelValue']);
   border: none;
   height: 100%;
   padding: 2rem;
+  /* room for the clear ⓧ in the top-right corner */
+  padding-right: 3rem;
 }
 
 @media (max-width: 768px) {
   .textarea {
-    padding: 1rem;
+    padding: 1rem 2.5rem 1rem 1rem;
     font-size: 0.875em;
   }
 }
diff --git a/src/components/__tests__/__snapshots__/QandA.spec.ts.snap b/src/components/__tests__/__snapshots__/QandA.spec.ts.snap
index 8d41cbc..a0b601f 100644
--- a/src/components/__tests__/__snapshots__/QandA.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/QandA.spec.ts.snap
@@ -192,12 +192,15 @@ exports[`QandA > renders properly 1`] = `
   >
     
     
+    <!-- two-line header (like a list item with a leading icon): the icon spans and centres on
+       title + status line; the status line stays outside the collapsible part so count + clear are always visible -->
     <div
-      class="is-clickable is-flex is-align-items-center is-align-content-center mt-4 mb-5"
+      class="filters-head"
       data-v-e843c1dd=""
     >
       <svg
-        class="mr-4"
+        aria-hidden="true"
+        class="head-icon"
         data-v-e843c1dd=""
         fill="none"
         height="24"
@@ -233,18 +236,19 @@ exports[`QandA > renders properly 1`] = `
           </clippath>
         </defs>
       </svg>
-      <span
-        class="is-flex is-align-items-center is-size-6"
-        data-v-e843c1dd=""
-      >
-        searchFilters
-      </span>
-      <div
-        class="chevron-icon"
+      <button
+        aria-expanded="true"
+        class="filters-toggle"
         data-v-e843c1dd=""
+        type="button"
       >
+        <span
+          data-v-e843c1dd=""
+        >
+          searchFilters
+        </span>
         <svg
-          class="ml-2"
+          class="chevron-icon"
           data-v-e843c1dd=""
           viewBox="0 0 448 512"
           xmlns="http://www.w3.org/2000/svg"
@@ -255,18 +259,21 @@ exports[`QandA > renders properly 1`] = `
             fill="currentColor"
           />
         </svg>
-      </div>
-    </div>
-    <p
-      data-v-e843c1dd=""
-    >
-      <span
-        class="has-text-grey"
+      </button>
+      <p
+        class="status-line"
         data-v-e843c1dd=""
       >
-        noFiltersSelected
-      </span>
-    </p>
+        <span
+          class="has-text-grey"
+          data-v-e843c1dd=""
+        >
+          noFiltersSelected
+        </span>
+      </p>
+    </div>
+    <!-- phones: when the panel is collapsed the status line is the summary, the pills would eat the screen -->
+    <!--v-if-->
     <div
       class="pr-5 filters"
       data-v-e843c1dd=""
diff --git a/src/components/dropdowns/SourcesSelector.vue b/src/components/dropdowns/SourcesSelector.vue
index c012393..6670b37 100644
--- a/src/components/dropdowns/SourcesSelector.vue
+++ b/src/components/dropdowns/SourcesSelector.vue
@@ -4,7 +4,6 @@ import ChevronDownIcon from '@/components/icons/ChevronDown.vue';
 import ChevronUpIcon from '@/components/icons/ChevronUp.vue';
 import { useFiltersStore } from '@/stores/filters';
 import type { Corpus } from '@/types';
-import { ref } from 'vue';
 
 defineProps<{ isUp?: boolean; context?: string; availableSources: Record<string, Corpus[]> }>();
 const filters = useFiltersStore();
@@ -14,7 +13,7 @@ const selectedCount = (sources: Corpus[]) =>
   sources.filter((source) => filters.sourcesFilters.includes(source.name)).length;
 
 // categories are open by default; the chevron folds them (ticking the category never does)
-const folded = ref<Record<string, boolean>>({});
+const folded = filters.foldedCategories;
 </script>
 <template>
   <div v-for="(sources, category) in availableSources" :key="category" class="category">
diff --git a/src/localisation/en.ts b/src/localisation/en.ts
index c3dbe4f..898dd92 100644
--- a/src/localisation/en.ts
+++ b/src/localisation/en.ts
@@ -287,6 +287,8 @@ export const en = {
     }
   },
   reload: 'Reload',
+  clearFilters: 'Clear all filters',
+  filtersSelected: '{n} selected',
   removeAll: 'Clear all',
   removeBookmark: 'Remove bookmark',
   removeSelection: 'Clear',
diff --git a/src/localisation/fr.ts b/src/localisation/fr.ts
index 51ee6cf..fc63186 100644
--- a/src/localisation/fr.ts
+++ b/src/localisation/fr.ts
@@ -290,6 +290,8 @@ export const fr = {
     }
   },
   reload: 'Recharger',
+  clearFilters: 'Effacer tous les filtres',
+  filtersSelected: '{n} sélectionné | {n} sélectionnés',
   removeAll: 'Tout effacer',
   removeBookmark: 'Retirer des favoris',
   removeSelection: 'Effacer',
diff --git a/src/stores/filters.ts b/src/stores/filters.ts
index e238b18..89c20f8 100644
--- a/src/stores/filters.ts
+++ b/src/stores/filters.ts
@@ -54,6 +54,12 @@ export const useFiltersStore = defineStore('filters', () => {
     }
   };
 
+  // UI layout of the filter panel, shared by Chat and Search so it survives tab switches (in memory, resets on reload)
+  // narrow screens start collapsed: the panel sits above the search results there
+  const panelOpen = ref(window.matchMedia?.('(min-width: 992px)').matches ?? true);
+  const openSections = ref({ sources: true, sdgs: true, languages: true });
+  const foldedCategories = ref<Record<string, boolean>>({});
+
   const handleResetFilters = () => {
     sdgFilters.value = [];
     sourcesFilters.value = [];
@@ -71,6 +77,9 @@ export const useFiltersStore = defineStore('filters', () => {
     handleLanguageFilterChange,
     languageList,
     languageFilters,
-    handleResetFilters
+    handleResetFilters,
+    panelOpen,
+    openSections,
+    foldedCategories
   };
 });
diff --git a/src/views/SearchSDG.vue b/src/views/SearchSDG.vue
index 05b4d80..ec714f5 100644
--- a/src/views/SearchSDG.vue
+++ b/src/views/SearchSDG.vue
@@ -5,7 +5,6 @@ import { useSearchStore } from '@/stores/search';
 import SourcesListComponent from '@/components/SourcesListComponent.vue';
 import SearchIcon from '@/components/icons/SearchIcon.vue';
 import SearchWrapper from '@/components/SearchWrapper.vue';
-import DeleteButton from '@/components/DeleteButton.vue';
 import Pill from '@/components/PillComponent.vue';
 import FiltersComponent from '@/components/FiltersComponent.vue';
 import ColumnTemplate from '@/components/ColumnTemplate.vue';
@@ -37,7 +36,7 @@ const expandSearch = async () => {
 </script>
 
 <template>
-  <ColumnTemplate class="search-page">
+  <ColumnTemplate class="search-page" filtersFirst>
     <template #left-panel>
       <div class="wrapper" ref="wrapper">
         <Transition name="fade">
@@ -54,9 +53,14 @@ const expandSearch = async () => {
         </Transition>
         <SearchWrapper v-show="!isCompact" class="search-box">
           <template #textArea>
-            <div class="delete-button-wrapper" v-if="store.searchInput">
-              <DeleteButton :action="store.$reset" :delText="$t('clearSearch')" />
-            </div>
+            <!-- standard "clear field" ⓧ in the corner, far from the search button -->
+            <button
+              v-if="store.searchInput"
+              class="delete clear-search"
+              :aria-label="$t('clearSearch')"
+              :title="$t('clearSearch')"
+              @click="store.$reset"
+            />
             <TextArea v-model="store.searchInput" />
           </template>
           <template #sdgsList>
@@ -186,16 +190,11 @@ const expandSearch = async () => {
   padding: 1rem 3rem 0rem 3rem;
 }
 
-.delete-button-wrapper {
+.clear-search {
   position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  align-items: flex-end;
+  top: 0.75rem;
+  right: 0.75rem;
   z-index: 1;
-  & > * {
-    border: none;
-  }
 }
 
 .text-length-feedback {
@@ -234,7 +233,7 @@ const expandSearch = async () => {
     padding-top: 0.25rem;
   }
   .wrapper {
-    padding: 0.25rem;
+    padding: 0.25rem 1rem;
   }
   .sdg-list-title {
     font-size: 0.875em;

From d34b91a4333517bed7500690fc02a89ccfe17620 Mon Sep 17 00:00:00 2001
From: Noor A <Noor@MacBook-Pro-de-CRI.local>
Date: Wed, 7 Oct 2026 18:28:32 +0200
Subject: [PATCH 2/4] fix(chat): mobile layout, clear-chat confirmation, scroll
 button, translated error

- clear chat moved to a toolbar above the messages and confirmed via ModalComponent
- scroll-to-bottom is a sticky, labelled button with one style at all widths
- mobile bubbles keep the avatar beside the text; markdown lists indented; left-aligned text
- error message translated; mobile 'go to sources' only when sources exist

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ChatArea.vue                   | 100 +++++++-----------
 src/components/ChatBuble.vue                  |  36 +++----
 src/components/ChatComponent.vue              |  62 +++++++----
 src/components/ChatError.vue                  |  14 ++-
 src/components/__tests__/ChatError.test.ts    |   2 +-
 .../__snapshots__/ChatError.test.ts.snap      |   2 +-
 .../__snapshots__/QandA.spec.ts.snap          |  56 +++++-----
 src/localisation/en.ts                        |   4 +
 src/localisation/fr.ts                        |   4 +
 9 files changed, 141 insertions(+), 139 deletions(-)

diff --git a/src/components/ChatArea.vue b/src/components/ChatArea.vue
index a037581..7f3a0b6 100644
--- a/src/components/ChatArea.vue
+++ b/src/components/ChatArea.vue
@@ -71,13 +71,17 @@ const handleOnWheel = () => {
       </div>
       <slot name="queues"></slot>
     </div>
-  </div>
-  <div
-    class="scroll-arrow"
-    :class="displayArrow ? 'visible' : 'hidden'"
-    @click="() => scrollToBottom(true)"
-  >
-    <ChevronDownVue />
+    <!-- zero-height sticky anchor: the button floats at the bottom of the scroller without taking layout space -->
+    <div class="scroll-arrow-anchor">
+      <button
+        v-show="displayArrow"
+        class="scroll-arrow"
+        :aria-label="$t('goToBottom')"
+        @click="() => scrollToBottom(true)"
+      >
+        <ChevronDownVue />
+      </button>
+    </div>
   </div>
 </template>
 
@@ -107,31 +111,36 @@ const handleOnWheel = () => {
   margin-top: auto;
 }
 
-.scroll-arrow {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  z-index: 1;
-
-  margin: 1rem;
+.scroll-arrow-anchor {
+  position: sticky;
+  bottom: 0.75rem;
+  height: 0;
   display: flex;
   justify-content: center;
-  align-items: center;
-  opacity: 0;
 }
 
-.visible {
-  opacity: 1;
+.scroll-arrow {
+  all: unset;
+  box-sizing: border-box;
+  transform: translateY(-100%);
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0.4rem;
+  border-radius: 50%;
+  border: 1px solid var(--neutral-20);
+  background-color: var(--neutral-0);
+  color: var(--neutral-80);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
   cursor: pointer;
-  transition: opacity 0.1s ease-in-out;
-}
-.hidden {
-  opacity: 0;
-  cursor: default;
-  transition: opacity 0.3s ease-in-out;
-  width: 0;
-  height: 0;
-  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &:hover {
+    background-color: var(--neutral-10);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+  }
 }
 
 .empty-chat {
@@ -140,41 +149,4 @@ const handleOnWheel = () => {
   height: 50%;
   align-items: center;
 }
-
-@media (min-width: 768px) {
-  .bottom-wrapper {
-    width: 100%;
-    padding-bottom: 1rem;
-  }
-  .scroll-arrow {
-    all: unset;
-    position: absolute;
-    bottom: 10%;
-    right: 50%;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    border: 1px solid;
-    padding: 4px;
-    color: var(--neutral-80);
-    background-color: rgba(255, 255, 255, 0.5);
-
-    margin: 1rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-  }
-
-  .visible {
-    opacity: 1;
-    cursor: pointer;
-    transition: opacity 0.1s ease-in-out;
-  }
-  .hidden {
-    opacity: 0;
-    cursor: default;
-    transition: opacity 0.3s ease-in-out;
-  }
-}
 </style>
diff --git a/src/components/ChatBuble.vue b/src/components/ChatBuble.vue
index 306a37a..50b1c82 100644
--- a/src/components/ChatBuble.vue
+++ b/src/components/ChatBuble.vue
@@ -85,13 +85,14 @@ const copyMessage = (msg: string) => {
   color: var(--neutral-80);
   padding: 1.25rem 1rem;
   gap: 1rem;
-  text-align: justify;
+  text-align: left;
 }
 .chat-bubble.last-message {
   padding-bottom: 5rem;
 }
 
 .cahtAvatar {
+  flex-shrink: 0;
   height: 1.5rem;
   margin-bottom: 0.9rem;
 }
@@ -100,12 +101,17 @@ const copyMessage = (msg: string) => {
   overflow: visible;
   margin: auto 0;
   border-radius: 0;
-  margin-left: 0.5rem;
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   margin-left: 0;
   & > a {
     color: var(--primary);
   }
+  /* markdown comes in via v-html, so lists need :deep to get an indent; otherwise the numbers sit in the margin */
+  & :deep(ol),
+  & :deep(ul) {
+    padding-left: 1.5em;
+  }
 }
 
 @media (max-width: 1450px) {
@@ -122,29 +128,17 @@ const copyMessage = (msg: string) => {
 }
 
 @media (max-width: 992px) {
+  /* keep avatar beside the text; the copy button wraps under the message, aligned with the text */
   .chat-bubble {
-    font-size: 0.9em;
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  .chat-bubble-content {
-    width: 100%;
-    margin-left: 0;
+    flex-wrap: wrap;
+    gap: 0.5rem 0.75rem;
+    padding: 1rem 0.5rem;
   }
 
   .details {
-    width: 10%;
-    height: 100%;
+    flex-basis: 100%;
     display: flex;
-    align-self: flex-end;
-    gap: 0.5rem;
-
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: flex-end;
+    padding-left: 2.75rem;
   }
 
   .chat-bubble.last-message {
diff --git a/src/components/ChatComponent.vue b/src/components/ChatComponent.vue
index b6cf96b..f74b8e5 100644
--- a/src/components/ChatComponent.vue
+++ b/src/components/ChatComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import ChatArea from '@/components/ChatArea.vue';
 import ChatBuble from '@/components/ChatBuble.vue';
 import ChatInput from '@/components/ChatInput.vue';
@@ -9,22 +9,43 @@ import ChatQueuesPills from '@/components/ChatQueuesPills.vue';
 import Loading from '@/components/LoadingComponent.vue';
 import { useChatStore, CHAT_STATUS } from '@/stores/chat';
 import DeleteButton from '@/components/DeleteButton.vue';
+import ModalComponent from '@/components/ModalComponent.vue';
 
 const store = useChatStore();
 
 onMounted(() => store.getRandomQuestionNumber());
 
 const computedStatus = computed(() => store.chatStatus);
+
+// plain hash jumps get lost in the nested scroll containers on phones, so scroll explicitly
+const scrollToSources = () =>
+  document.getElementById('sourcesAnchor')?.scrollIntoView({ behavior: 'smooth' });
+
+const confirmClear = ref(false);
+const clearChat = () => {
+  store.$reset();
+  confirmClear.value = false;
+};
 </script>
 <template>
   <div class="chat-template">
-    <div class="delete-button-wrapper">
-      <DeleteButton
-        v-if="computedStatus !== CHAT_STATUS.EMPTY"
-        :action="store.$reset"
-        :delText="$t('clearChat')"
-      />
+    <div class="chat-toolbar" v-if="computedStatus !== CHAT_STATUS.EMPTY">
+      <DeleteButton :action="() => (confirmClear = true)" :delText="$t('clearChat')" />
     </div>
+    <!-- v-if: ModalComponent only reads isOpen on mount -->
+    <ModalComponent
+      v-if="confirmClear"
+      isOpen
+      :title="$t('confirmClearChat')"
+      :onClose="() => (confirmClear = false)"
+    >
+      <template #actions>
+        <div class="buttons my-4">
+          <button class="button" @click="confirmClear = false">{{ $t('cancel') }}</button>
+          <button class="button is-danger" @click="clearChat">{{ $t('clearChat') }}</button>
+        </div>
+      </template>
+    </ModalComponent>
     <ChatArea :isEmpty="computedStatus === CHAT_STATUS.EMPTY">
       <template #message-list>
         <ChatEmptyContent
@@ -74,9 +95,10 @@ const computedStatus = computed(() => store.chatStatus);
       </template>
     </ChatArea>
     <a
-      v-if="computedStatus !== CHAT_STATUS.DONE"
+      v-if="computedStatus === CHAT_STATUS.DONE && store.sourcesList.length"
       class="sourcesListLink phone"
       href="#sourcesAnchor"
+      @click.prevent="scrollToSources"
       >{{ $t('goToSources') }}</a
     >
 
@@ -99,11 +121,12 @@ const computedStatus = computed(() => store.chatStatus);
   height: 100%;
 }
 
-.delete-button-wrapper {
-  position: absolute;
-  right: 10%;
-  top: 1rem;
-  z-index: 1;
+.chat-toolbar {
+  width: 80%;
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.5rem 0;
+  margin-bottom: 0.5rem;
 }
 
 .trash-icon {
@@ -158,12 +181,9 @@ const computedStatus = computed(() => store.chatStatus);
 }
 
 @media (max-width: 950px) {
-  .delete-button-wrapper {
-    position: absolute;
-    right: 0.5rem;
-    top: auto;
-    bottom: 2rem;
-    z-index: 1;
+  .chat-toolbar {
+    width: 100%;
+    padding-inline: 0.5rem;
   }
 
   .queues-wrapper {
@@ -175,10 +195,10 @@ const computedStatus = computed(() => store.chatStatus);
   }
 
   .input-area {
-    width: 85%;
+    width: calc(100% - 1rem);
     padding: 0.25rem 0.25rem;
     border-radius: 0.375rem;
-    margin: 0 1.5rem 0 0;
+    margin: 0 0.5rem;
 
     line-height: 1;
     height: fit-content;
diff --git a/src/components/ChatError.vue b/src/components/ChatError.vue
index a2392af..8d360d9 100644
--- a/src/components/ChatError.vue
+++ b/src/components/ChatError.vue
@@ -8,7 +8,7 @@ const reload = () => {
 
 <template>
   <div class="chat-error">
-    <div>Oops something wrong hapened. Please try again later.</div>
+    <div>{{ $t('chatError') }}</div>
     <ButtonComponent color="secondary" @click="reload()">
       {{ $t('reload') }}
     </ButtonComponent>
@@ -23,6 +23,16 @@ const reload = () => {
   height: 100%;
   text-align: center;
   font-size: 1.125em;
-  color: var(--neutral-20);
+  color: var(--neutral-80);
+  width: 80%;
+  gap: 1rem;
+  margin: 2rem auto;
+}
+
+@media (max-width: 950px) {
+  .chat-error {
+    width: 100%;
+    padding-inline: 1rem;
+  }
 }
 </style>
diff --git a/src/components/__tests__/ChatError.test.ts b/src/components/__tests__/ChatError.test.ts
index 98d7be4..550e55f 100644
--- a/src/components/__tests__/ChatError.test.ts
+++ b/src/components/__tests__/ChatError.test.ts
@@ -7,6 +7,6 @@ describe('ChatError', () => {
   it('renders properly', () => {
     const wrapper = mount(ChatError);
     expect(wrapper.element).toMatchSnapshot();
-    expect(wrapper.text()).toContain('Oops something wrong hapened. Please try again later.');
+    expect(wrapper.text()).toContain('chatError');
   });
 });
diff --git a/src/components/__tests__/__snapshots__/ChatError.test.ts.snap b/src/components/__tests__/__snapshots__/ChatError.test.ts.snap
index 9612f7f..7f865f7 100644
--- a/src/components/__tests__/__snapshots__/ChatError.test.ts.snap
+++ b/src/components/__tests__/__snapshots__/ChatError.test.ts.snap
@@ -8,7 +8,7 @@ exports[`ChatError > renders properly 1`] = `
   <div
     data-v-9a0d2e9c=""
   >
-    Oops something wrong hapened. Please try again later.
+    chatError
   </div>
   <button
     class="button is-secondary"
diff --git a/src/components/__tests__/__snapshots__/QandA.spec.ts.snap b/src/components/__tests__/__snapshots__/QandA.spec.ts.snap
index a0b601f..9e0d900 100644
--- a/src/components/__tests__/__snapshots__/QandA.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/QandA.spec.ts.snap
@@ -16,16 +16,13 @@ exports[`QandA > renders properly 1`] = `
       data-v-8765cc6e=""
       data-v-dbbc9003=""
     >
-      <div
-        class="delete-button-wrapper"
-        data-v-8765cc6e=""
-      >
-        <!--v-if-->
-      </div>
-      
+      <!--v-if-->
+      <!-- v-if: ModalComponent only reads isOpen on mount -->
+      <!--v-if-->
       <div
         class="chat-component hidden-scroll"
         data-v-69ac69ea=""
+        data-v-8765cc6e=""
         style="scroll-behavior: auto;"
       >
         <div
@@ -74,31 +71,32 @@ exports[`QandA > renders properly 1`] = `
           
           
         </div>
-      </div>
-      <div
-        class="scroll-arrow hidden"
-        data-v-69ac69ea=""
-      >
-        <svg
+        <!-- zero-height sticky anchor: the button floats at the bottom of the scroller without taking layout space -->
+        <div
+          class="scroll-arrow-anchor"
           data-v-69ac69ea=""
-          viewBox="0 0 448 512"
-          xmlns="http://www.w3.org/2000/svg"
         >
-          <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-          <path
-            d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
-            fill="currentColor"
-          />
-        </svg>
+          <button
+            aria-label="goToBottom"
+            class="scroll-arrow"
+            data-v-69ac69ea=""
+            style="display: none;"
+          >
+            <svg
+              data-v-69ac69ea=""
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+              <path
+                d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
-      
-      <a
-        class="sourcesListLink phone"
-        data-v-8765cc6e=""
-        href="#sourcesAnchor"
-      >
-        goToSources
-      </a>
+      <!--v-if-->
       <div
         class="input-area"
         data-v-8765cc6e=""
diff --git a/src/localisation/en.ts b/src/localisation/en.ts
index 898dd92..711e4cf 100644
--- a/src/localisation/en.ts
+++ b/src/localisation/en.ts
@@ -20,6 +20,10 @@ export const en = {
   chatProvideValidQuestion: 'Please enter a valid question.',
   clearBookmarks: 'Clear bookmarks',
   clearChat: 'Clear chat',
+  chatError: 'Something went wrong. Please try again later.',
+  cancel: 'Cancel',
+  confirmClearChat: 'Delete this whole conversation?',
+  goToBottom: 'Scroll to latest message',
   clearSearch: 'Clear search',
   closeSidebar: 'Hide sidebar',
   copied: 'Copied!',
diff --git a/src/localisation/fr.ts b/src/localisation/fr.ts
index fc63186..c98c14e 100644
--- a/src/localisation/fr.ts
+++ b/src/localisation/fr.ts
@@ -19,6 +19,10 @@ export const fr = {
   chatProvideValidQuestion: 'Veuillez saisir une question valide.',
   clearBookmarks: 'Supprimer tous les favoris',
   clearChat: 'Effacer la conversation',
+  chatError: "Une erreur s'est produite. Veuillez réessayer plus tard.",
+  cancel: 'Annuler',
+  confirmClearChat: 'Supprimer toute cette conversation ?',
+  goToBottom: 'Aller au dernier message',
   clearSearch: 'Effacer la recherche',
   closeSidebar: 'Masquer la barre latérale',
   copied: 'Copié !',

From 9557919ca7b7f1b3dce063da0d12e09a999492cf Mon Sep 17 00:00:00 2001
From: Noor A <Noor@MacBook-Pro-de-CRI.local>
Date: Wed, 7 Oct 2026 18:28:33 +0200
Subject: [PATCH 3/4] fix(nav): single breakpoint for logo/nav, symbol logo,
 nav tooltips, footer contact

- at 1330px the logo switches to logo-symbol.png, nav labels become tooltips and the nav top space goes, together
- TooltipComponent gets an isBelow option, used by the nav
- nav icons normalised, phone row fits iPhone SE, language menu opens leftwards
- remove the scroll script that hid the header via direct DOM edits
- footer shows 'Contact' (mailto) so it fits one line on phones in FR

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/assets/logo-symbol.png                | Bin 0 -> 11203 bytes
 src/components/AppHeader.vue              |  39 +++++++++++++++++-----
 src/components/AppLayout.vue              |  32 ++----------------
 src/components/FooterComponent.vue        |   6 +++-
 src/components/TooltipComponent.vue       |  21 ++++++++++--
 src/components/icons/LinesLeaningIcon.vue |   8 ++++-
 src/components/nav/BaseNavItem.vue        |  35 ++++++++++++++-----
 src/components/nav/LanguageSelector.vue   |  11 ++++++
 src/components/nav/NavComponent.vue       |   8 ++++-
 src/localisation/en.ts                    |   1 +
 src/localisation/fr.ts                    |   1 +
 11 files changed, 111 insertions(+), 51 deletions(-)
 create mode 100644 src/assets/logo-symbol.png

diff --git a/src/assets/logo-symbol.png b/src/assets/logo-symbol.png
new file mode 100644
index 0000000000000000000000000000000000000000..45f23f2794152f1eb01feede0cc04669269bf6e2
GIT binary patch
literal 11203
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

literal 0
HcmV?d00001

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 3d4e44a..85acb7e 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,7 +1,9 @@
 <template>
   <router-link class="app-header-link" to="/">
     <div class="app-header">
-      <img alt="App large logo" class="logo" src="@/assets/logo.png" />
+      <!-- both loaded up front and toggled by CSS: a <picture> swap lags behind the size change and flickers -->
+      <img alt="App large logo" class="logo logo-full" src="@/assets/logo.png" />
+      <img alt="App large logo" class="logo logo-symbol" src="@/assets/logo-symbol.png" />
 
       <span class="is-title has-text-weight-semibold has-text-success ml-1">Beta</span>
     </div>
@@ -10,11 +12,9 @@
 
 <style scoped>
 .app-header {
-  margin: 1rem 0 1em 1rem;
+  margin: 1rem 0 0 1rem;
   z-index: 1;
   display: flex;
-  margin-left: 2%;
-  margin-bottom: 0rem;
 }
 
 .app-header-link {
@@ -24,15 +24,38 @@
 .logo {
   height: 100%;
   width: auto;
-  max-height: clamp(24px, 5vw, 3.5em);
+  max-height: 3.5em;
+}
+.logo-symbol {
+  display: none;
 }
 
+/* 1330px = where full logo + labelled nav stop fitting (measured ~1280px in FR); below it the logo is
+   swapped for the symbol, nav labels become tooltips (BaseNavItem) and the nav loses its top space (NavComponent).
+   Keep the three breakpoints in sync */
 @media (max-width: 1330px) {
+  /* bottom-align with the nav: the 2.5rem logo's centre then sits 1.25rem up, same as the nav icons'
+     (1.5rem icon + 0.5rem padding under it), so they stay level whatever the nav's top padding */
   .app-header-link {
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+    align-self: flex-end;
+  }
+  .app-header {
+    margin: 0 0 0 1rem;
+  }
+  .logo {
+    height: 2.5rem;
+    max-height: none;
+  }
+  .logo-full {
+    display: none;
+  }
+  .logo-symbol {
+    display: block;
+  }
+  .app-header > span {
     display: none;
-    & > * {
-      display: none;
-    }
   }
 }
 </style>
diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
index 001b828..ffe4044 100644
--- a/src/components/AppLayout.vue
+++ b/src/components/AppLayout.vue
@@ -1,39 +1,10 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const content = ref();
-
-const manageNavBarAnimations = () => {
-  if (document?.defaultView?.innerWidth && document.defaultView.innerWidth > 992) return;
-
-  const appHeaderName = document.getElementsByClassName('name-only')[0] as HTMLElement;
-  const appHeader = document.getElementsByClassName('app-header')[0] as HTMLElement;
-
-  const header = document.getElementsByClassName('appLayout')[0] as HTMLElement;
-
-  const scrollTop = content.value.scrollTop;
-
-  if (!header) return;
-
-  if (scrollTop > 0) {
-    if (!appHeaderName || !appHeader) return;
-    appHeaderName.style.display = 'flex';
-    appHeader.style.display = 'none';
-    header.style.gridTemplateRows = '3rem auto';
-  } else {
-    appHeaderName.style.display = 'none';
-    appHeader.style.display = 'flex';
-    header.style.gridTemplateRows = '6.5em auto';
-  }
-};
-</script>
 <template>
   <div class="appLayout">
     <div class="header">
       <slot name="header"></slot>
       <slot name="sidebar"> </slot>
     </div>
-    <div class="main" ref="content" @scroll="manageNavBarAnimations"><slot name="main"></slot></div>
+    <div class="main"><slot name="main"></slot></div>
     <div class="wl-footer">
       <slot name="footer"></slot>
     </div>
@@ -60,6 +31,7 @@ const manageNavBarAnimations = () => {
   width: 100%;
   height: 100%;
   overflow: auto;
+  overscroll-behavior: contain;
   scroll-behavior: smooth;
 }
 
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index a6fe1f9..08134f0 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="footer-wrapper">
     <div>
-      <a href="mailto:welearn@learningplanetinstitute.org">welearn@learningplanetinstitute.org</a>
+      <a
+        href="mailto:welearn@learningplanetinstitute.org"
+        title="welearn@learningplanetinstitute.org"
+        >{{ $t('contact') }}</a
+      >
       <router-link class="terms" to="/terms">
         <span class="item-name">{{ $t('terms') }}</span>
       </router-link>
diff --git a/src/components/TooltipComponent.vue b/src/components/TooltipComponent.vue
index 05268c0..d0155d3 100644
--- a/src/components/TooltipComponent.vue
+++ b/src/components/TooltipComponent.vue
@@ -4,11 +4,15 @@ defineProps<{
   isLeft?: boolean;
   isRight?: boolean;
   isOnTop?: boolean;
+  isBelow?: boolean;
 }>();
 </script>
 <template>
-  <div class="tooltip-wraper">
-    <div class="tooltip" :class="{ isleft: isLeft, isright: isRight, top: isOnTop }">
+  <div class="tooltip-wraper" :class="{ below: isBelow }">
+    <div
+      class="tooltip"
+      :class="{ isleft: isLeft, isright: isRight, top: isOnTop, below: isBelow }"
+    >
       {{ tooltipText }}
     </div>
   </div>
@@ -33,6 +37,19 @@ defineProps<{
   white-space: nowrap;
 }
 
+/* below: the wrapper overlays the parent (needs position: relative) so it takes no space in the
+   parent's layout (no flex gap), and the tooltip is centred under it */
+.tooltip-wraper.below {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.tooltip.below {
+  top: calc(100% + 0.5rem);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .top.isright {
   top: -60px;
   border-bottom-left-radius: 0;
diff --git a/src/components/icons/LinesLeaningIcon.vue b/src/components/icons/LinesLeaningIcon.vue
index bc69eda..b5cd6f7 100644
--- a/src/components/icons/LinesLeaningIcon.vue
+++ b/src/components/icons/LinesLeaningIcon.vue
@@ -1,5 +1,11 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="96 96 448 448"
+    width="20"
+    height="20"
+    fill="currentColor"
+  >
     <!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
     <path
       d="M318.4 138.1C324 121.3 314.9 103.2 298.2 97.6C281.5 92 263.3 101.1 257.7 117.8L129.7 501.8C124.1 518.6 133.2 536.7 149.9 542.3C166.6 547.9 184.8 538.8 190.4 522.1L318.4 138.1zM389.3 96.4C371.9 93.5 355.4 105.3 352.5 122.7L288.5 506.7C285.6 524.1 297.4 540.6 314.8 543.5C332.2 546.4 348.7 534.6 351.6 517.2L415.6 133.2C418.5 115.8 406.7 99.3 389.3 96.4zM480 96C462.3 96 448 110.3 448 128L448 512C448 529.7 462.3 544 480 544C497.7 544 512 529.7 512 512L512 128C512 110.3 497.7 96 480 96z"
diff --git a/src/components/nav/BaseNavItem.vue b/src/components/nav/BaseNavItem.vue
index a2a0ef5..ef2b401 100644
--- a/src/components/nav/BaseNavItem.vue
+++ b/src/components/nav/BaseNavItem.vue
@@ -10,11 +10,15 @@
         <component :is="icon" />
       </div>
       <span class="item-name">{{ $t(`nav.${name}`) }}</span>
+      <!-- aria-hidden: screen readers already get the name from .item-name -->
+      <TooltipComponent class="tltip" isBelow aria-hidden="true" :tooltipText="$t(`nav.${name}`)" />
     </router-link>
   </div>
 </template>
 
 <script setup lang="ts">
+import TooltipComponent from '@/components/TooltipComponent.vue';
+
 defineProps<{
   to: string;
   name: string;
@@ -67,6 +71,11 @@ defineProps<{
   align-items: center;
   justify-content: center;
 }
+/* icons ship at different native sizes (15–24px); force one box so they read as a set */
+.icon :deep(svg) {
+  width: 1.375rem;
+  height: 1.375rem;
+}
 
 .item-name {
   width: auto;
@@ -88,13 +97,21 @@ defineProps<{
   }
 }
 
-@media (max-width: 1100px) {
+/* icon-only nav: the label is visually hidden (still read by screen readers) and shown as a tooltip on hover/focus */
+@media (max-width: 1330px) {
+  .router-link {
+    position: relative;
+  }
   .item-name {
-    display: none;
-    visibility: hidden;
-    opacity: 0;
-    width: 0rem;
-    white-space: nowrap;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+  .router-link:hover .tltip,
+  .router-link:focus-visible .tltip {
+    display: block;
   }
 }
 
@@ -110,9 +127,11 @@ defineProps<{
   }
 }
 
-@media (max-width: 450px) {
+/* phones (iPhone SE 375px and up): logo + 6 icons + language must fit on one row */
+@media (max-width: 640px) {
   .router-link {
-    padding-inline: 0.05rem;
+    margin: 0;
+    padding-inline: 0.25rem;
   }
   .link-wrapper {
     padding-inline: 0rem;
diff --git a/src/components/nav/LanguageSelector.vue b/src/components/nav/LanguageSelector.vue
index 33778ca..b03fd4b 100644
--- a/src/components/nav/LanguageSelector.vue
+++ b/src/components/nav/LanguageSelector.vue
@@ -29,6 +29,15 @@ const storeLanguage = (e: Event) => {
   padding-bottom: 0.25rem;
 }
 
+@media (max-width: 650px) {
+  .language-selector {
+    margin-right: 0.5rem;
+  }
+  select {
+    padding-inline: 0.5rem;
+  }
+}
+
 select,
 ::picker(select) {
   appearance: base-select;
@@ -56,6 +65,8 @@ select:open::picker-icon {
   rotate: 180deg;
 }
 ::picker(select) {
+  /* open towards the left: the selector sits at the right edge of the screen */
+  position-area: bottom span-left;
   border-radius: 8px;
   border: 1px solid #cccccc;
 }
diff --git a/src/components/nav/NavComponent.vue b/src/components/nav/NavComponent.vue
index f97f7fd..d5d294b 100644
--- a/src/components/nav/NavComponent.vue
+++ b/src/components/nav/NavComponent.vue
@@ -147,9 +147,15 @@ const utilityEntries = [
   }
 }
 
-@media (max-width: 768px) {
+/* icon-only nav (in sync with AppHeader's 1330px): drop the top space kept for the full logo */
+@media (max-width: 1330px) {
   .nav-items {
     padding-top: 0.05rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .nav-items {
     width: 95%;
     margin: 0 auto;
   }
diff --git a/src/localisation/en.ts b/src/localisation/en.ts
index 711e4cf..b0a5e57 100644
--- a/src/localisation/en.ts
+++ b/src/localisation/en.ts
@@ -341,6 +341,7 @@ export const en = {
     exportBibliography: 'Export bibliography',
     exportingBibliography: 'Exporting...'
   },
+  contact: 'Contact',
   terms: 'Privacy Policy',
   subjects: {
     Anthropology: 'Anthropology',
diff --git a/src/localisation/fr.ts b/src/localisation/fr.ts
index c98c14e..eb03036 100644
--- a/src/localisation/fr.ts
+++ b/src/localisation/fr.ts
@@ -345,6 +345,7 @@ export const fr = {
     exportBibliography: 'Exporter la bibliographie',
     exportingBibliography: 'Export en cours...'
   },
+  contact: 'Contact',
   terms: 'Politique de confidentialité',
   subjects: {
     Anthropology: 'Anthropologie',

From 9a4260fd19df30ab088b1e44947280a9d72af4da Mon Sep 17 00:00:00 2001
From: Noor A <Noor@MacBook-Pro-de-CRI.local>
Date: Wed, 7 Oct 2026 18:28:33 +0200
Subject: [PATCH 4/4] fix(ui): mobile viewport height, Likert scale, status
 modal, terms page

- dvh so the app fits the visible screen on phones
- Likert scale fits phone width with legends at the edges
- narrower, centred tutor status modal
- terms page readable width and title wording

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 public/terms_en.md                           |  2 +-
 public/terms_fr.md                           |  2 +-
 src/App.vue                                  |  2 ++
 src/assets/base.css                          |  1 +
 src/components/microlearning/LikertScale.vue | 26 +++++++++++++++++---
 src/components/tutor/StatusModal.vue         |  9 +++++++
 src/views/TermsPage.vue                      |  2 +-
 7 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/public/terms_en.md b/public/terms_en.md
index 46829c3..2d54f0f 100644
--- a/public/terms_en.md
+++ b/public/terms_en.md
@@ -1,4 +1,4 @@
-## **Privacy Policy – WeLearn**
+## **WeLearn Privacy Policy**
 
 ### **1\. Who are we?**
 
diff --git a/public/terms_fr.md b/public/terms_fr.md
index edc1c65..50cbb24 100644
--- a/public/terms_fr.md
+++ b/public/terms_fr.md
@@ -1,4 +1,4 @@
-## **Politique de confidentialité – WeLearn**
+## **Politique de confidentialité de WeLearn**
 
 ### **1\. Qui sommes-nous ?**
 
diff --git a/src/App.vue b/src/App.vue
index 86464fb..d4f522b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -60,5 +60,7 @@ onMounted(async () => {
 .fullscreen {
   width: 100vw;
   height: 100vh;
+  /* dvh = height actually visible on phones (address bar shown); 100vh is taller there and lets the page scroll the nav away */
+  height: 100dvh;
 }
 </style>
diff --git a/src/assets/base.css b/src/assets/base.css
index 93be93f..bdad0bc 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -144,6 +144,7 @@ tbody {
 }
 body {
   height: 100vh;
+  height: 100dvh;
   color: var(--neutral-100);
   background: var(--neutral-0);
 
diff --git a/src/components/microlearning/LikertScale.vue b/src/components/microlearning/LikertScale.vue
index fffb90d..b9a4198 100644
--- a/src/components/microlearning/LikertScale.vue
+++ b/src/components/microlearning/LikertScale.vue
@@ -10,9 +10,12 @@
       >
         {{ value }}
       </button>
-      <span class="levelLegend" v-if="value === 1 || value == 5">{{
-        value === 1 ? $t('autoEvaluation.notAtAll') : $t('autoEvaluation.tottally')
-      }}</span>
+      <span
+        class="levelLegend"
+        :class="value === 1 ? 'start' : 'end'"
+        v-if="value === 1 || value == 5"
+        >{{ value === 1 ? $t('autoEvaluation.notAtAll') : $t('autoEvaluation.tottally') }}</span
+      >
     </div>
   </div>
 </template>
@@ -33,7 +36,7 @@ defineProps<{ disabled?: boolean }>();
 .scaleValue {
   background-color: var(--neutral-0);
   text-align: center;
-  padding: 0.5rem 2rem;
+  padding: 0.5rem 0;
   border-radius: 0.5rem;
   margin-top: 0.5rem;
   cursor: pointer;
@@ -58,14 +61,29 @@ defineProps<{ disabled?: boolean }>();
   color: var(--neutral-0);
 }
 
+/* legends hug the outer edges and may run inward past their narrow column instead of wrapping */
 .levelLegend {
   font-size: 0.8rem;
   color: var(--neutral-80);
+  white-space: nowrap;
+}
+.levelLegend.start {
+  align-self: flex-start;
+}
+.levelLegend.end {
+  align-self: flex-end;
+}
+
+@media (max-width: 576px) {
+  .scaleWrapper {
+    gap: 0.5rem;
+  }
 }
 
 .scaleLevel {
   display: flex;
   flex: 1;
+  min-width: 0;
   flex-direction: column;
   align-items: center;
   width: 100%;
diff --git a/src/components/tutor/StatusModal.vue b/src/components/tutor/StatusModal.vue
index 7afc1b4..f2d8317 100644
--- a/src/components/tutor/StatusModal.vue
+++ b/src/components/tutor/StatusModal.vue
@@ -44,6 +44,15 @@ defineProps<{
 .status {
   position: relative;
   padding: 2rem;
+  max-width: 26rem;
+  margin-inline: auto;
+}
+
+@media (max-width: 576px) {
+  .status {
+    max-width: 20rem;
+    padding: 1.5rem 1.25rem;
+  }
 }
 
 .close {
diff --git a/src/views/TermsPage.vue b/src/views/TermsPage.vue
index ea265ba..b79a227 100644
--- a/src/views/TermsPage.vue
+++ b/src/views/TermsPage.vue
@@ -40,7 +40,7 @@ watch(
 
 <style scoped>
 .terms-page {
-  max-width: 70%;
+  max-width: 48rem;
   margin: 2rem auto;
   padding: 0 1rem;
 }