fix(ui): filter panel state, chat/search mobile layout, header & nav polish

[noor-lpi]

Mostly UI polish across Chat, Search and the header. Easiest to review commit by commit: each commit is one area, and no line is touched by more than one commit.

Filters & search

• The filter panel's open/closed state and which sections are expanded (Sources, SDGs, Languages, source categories) now persist when switching between Chat and Search. It's in-memory in the Pinia filters store and resets on reload. On narrow screens the panel starts collapsed.
• New panel header: the title and chevron are a real button (keyboard accessible). The status line under it ("3 selected · Clear all" / "No filters selected") stays visible when the panel is collapsed.
• On phones the selected-filter pills are hidden while the panel is collapsed, and the status line acts as the summary. The pill "x" is now a labelled button.
• Mobile Search: the filter panel sits above the results (new filtersFirst prop on ColumnTemplate).
• Search box: clearing is now a standard ⓧ (Bulma delete) in the corner of the text box, away from the search button.

Chat

• "Clear chat" moved into a small toolbar above the messages, where it used to overlap them. It now asks for confirmation with the existing ModalComponent.
• The scroll-to-bottom arrow is a real <button> with an aria-label, pinned to the bottom of the chat, with the same style at every width.
• Mobile bubbles: the avatar stays beside the text and the copy button wraps underneath. Markdown lists are indented. Text is left-aligned instead of justified.
• The error message is translated (EN/FR) instead of hard-coded English.
• The mobile "Go to sources" link only appears once an answer has sources, and it scrolls reliably.

Header, nav & footer

• One breakpoint, 1330px, measured: the full logo plus the labelled nav needs about 1,280px in French. Above it, the full logo and nav labels. Below it, the symbol-only logo (logo-symbol.png, cut from logo.png), an icon-only nav with the labels as tooltips, and no extra top space. The logo stays level with the icons.
• TooltipComponent gets an isBelow option, used by the nav. Screen readers still read each label once.
• Nav icons are normalised to one size, and the Micro-learning icon is fixed. On phones, the logo, 6 icons and the language selector fit at iPhone SE width, and the language menu opens to the left.
• Removed the script that hid the header on scroll by editing the DOM directly.
• Footer: the email shows as "Contact" (still a mailto: link, with the address on hover), so it fits on one line on phones in French.

Layout & misc

• Uses dvh units so the app fits the visible screen on phones and the nav no longer scrolls away.
• The Likert scale (1-5 user self-evaluation survey) fits phone width, with the legends at the edges.
• The tutor status modal is narrower and centred.
• The Terms page has a readable width (48rem) and a tidier title.

Test plan

• Unit tests pass at every commit (snapshots updated for the chat/filters markup)
• Chat and Search at desktop and phone widths, in EN and FR
• Filters: collapse a section, switch Chat ↔ Search, and the state is kept
• Clear chat shows the confirmation; Cancel keeps the conversation
• Resize across 1330px: the logo and nav switch together with no flicker; hover the icons to see the tooltips
• Footer on one line on a phone in FR

Known issue (pre-existing, not fixed here)

• ColumnTemplate.vue calls handleDisplayArrow on scroll, but this function doesn't exist in the component. This bug is already on main. The fix is to use the existing useGoTo composable, but that also adds a "go to top" arrow --> TO DO in a separate PR.

🤖 Co-generated with Claude Code

[sandragjacinto]

se changement est deja fait sur main

[sandragjacinto]

avec l'arrivée du login il y a un nouveau boutton dans la nav. en mode téléphone on ne le voit plus, est-ce que tu penses que tu peux faire le fix dans cette PR ? merci !