fix: repair chat playground mobile layout

[electron-rare]

Problème

Le playground de chat (/chat/$owner/$name) était cassé sur mobile : panneaux qui se chevauchent, traits de bordure parasites, bouton d'envoi coupé hors écran.

Deux causes :

1. Double .wrap — le layout racine enveloppe tout dans <main className="wrap"> (padding --pad). La route chat ré-applique .wrap sur sa <section> → padding compté deux fois. Sur 375 px, .chat-shell tombait à 247 px au lieu de 311 (la page d'accueil annule ça avec un margin négatif ; la route chat, non).
2. Bug flexbox — le <textarea> est flex-1 sans min-width: 0 : il refuse de rétrécir sous sa largeur de contenu et pousse le bouton d'envoi hors de l'écran.

Correctif (périmètre : réparer le mobile + état vide ; desktop inchangé)

• styles.css — sous 768 px, marge négative d'un --pad de chaque côté sur .chat-shell → le playground reprend toute la largeur du téléphone (247 → 311 px).
• PromptInput — min-w-0 sur le textarea (le bouton d'envoi reste dans les clous) ; le composant passe en contrôlé (value/onChange) — PromptInput.test.tsx mis à jour avec un harnais d'état.
• ChatPlayground — le grand vide avant le premier message reçoit un état d'accueil : une ligne + 3 prompts d'exemple cliquables qui pré-remplissent la saisie.

Style desktop conservé (Tailwind) conformément au périmètre choisi.

Vérification

• biome check + tsc --noEmit OK · vitest 16/16.
• Chromium headless, playground servi en local (API de prod) :
  • mobile 375 px : docScrollW=375 (zéro débordement), .chat-shell=311 px, bouton d'envoi dans les bornes.
  • desktop 1280 px : layout 3 colonnes inchangé, le vide central comblé par l'état vide.
  • clic sur un prompt d'exemple → la saisie se pré-remplit (vérifié).

Hors périmètre

Le playground reste en Tailwind générique (slate/emerald), visuellement décorrélé du design system « papier/encre » du reste du site — styles.css contient pourtant déjà un jeu de classes .chat-banner / .msg / .chat-input inutilisé. Recâbler le composant dessus serait l'amélioration esthétique de fond, à planifier séparément.

[Copilot]

Pull request overview

This PR fixes the chat playground’s mobile layout issues by compensating for doubled horizontal padding in the chat route and addressing a flexbox shrink issue in the prompt input, while also improving the empty-state UX with clickable example prompts.

Changes:

• Add a mobile-only negative margin on .chat-shell to neutralize the double .wrap padding on chat routes.
• Convert PromptInput to a controlled component and add min-w-0 to the textarea so the Send button no longer gets pushed off-screen.
• Add an empty-state to ChatPlayground with example prompts that prefill (but don’t auto-send) the input.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
apps/cockpit-public/src/styles.css	Mobile CSS adjustment to reclaim width lost to nested .wrap padding in chat routes.
apps/cockpit-public/src/components/ChatPlayground/PromptInput.tsx	Make input controlled and fix flex shrink behavior on mobile via min-w-0.
apps/cockpit-public/src/components/ChatPlayground/ChatPlayground.tsx	Add empty-state UI and wire controlled input state into PromptInput.
apps/cockpit-public/tests/components/PromptInput.test.tsx	Update tests to use a state harness matching the new controlled PromptInput API.

Comments suppressed due to low confidence (1)

apps/cockpit-public/src/components/ChatPlayground/PromptInput.tsx:201

• The Send button is icon-only and currently has no accessible name. Add an aria-label (or visually-hidden text) so screen readers can announce it and tests can query it by name instead of relying on positional selection.

        <button
          type="button"
          onClick={handleSubmit}
          disabled={!canSend}
          className="rounded bg-emerald-600 px-4 text-white disabled:opacity-50"
        >
          <Send size={16} />
        </button>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.