---
suivi: 1057
date: 2026-07-29
sujet: UX modale tâche — deux colonnes + onglets étiquettes
chantier: taches_suivi
type: ux
statut: poussé
hash: 53cdf93d
fichiers:
  - resources/js/Components/TachesSuivi/TacheSuiviDetailModal.vue
  - resources/js/Components/TachesSuivi/TacheSuiviEtiquettesEditor.vue
  - resources/js/Components/TachesSuivi/TacheSuiviDocumentsPanel.vue
  - resources/css/mes-taches.css
  - database/data/journal_mises_a_jour_post_2026_06_12.php
  - public/build/
---

## PROMPT ENVOYÉ

SUIVI #1057 — lot purement visuel. Refonte présentation TacheSuiviDetailModal :
deux colonnes, un seul scroll, pied unique, étiquettes en onglets classeur (Planner),
fix « No file chosen ». Aucun changement fonctionnel / back / droits / routes.

## SYNTHÈSE

### Structure livrée
- Colonne gauche (~60 %) : description, checklist, documents, commentaires (+ compose)
- Colonne droite (~40 %) : bandeau méta, statut + Terminer/Abandonner/Déléguer, personnes
- Rail droit : onglets étiquettes (libellé horizontal, couleur #1055) + « + » → sélecteur
  réutilisant la logique de `TacheSuiviEtiquettesEditor` (variant `rail`)
- Pied : Modifier + Supprimer à gauche, Fermer à droite
- Responsive ≤840px : colonnes empilées, rail en rangée

### Cas limites étiquettes
- 0 : rien + bouton « + » si `manage_etiquettes_libres`
- Libellé long : ellipsis + tooltip
- N nombreuses : scroll vertical du rail seul
- Contraste : luminance relative → texte sombre sur jaune/clair, blanc sinon
- Non modifiable (programme / projet si non-créateur) : pas de retrait au clic, tooltip

### Tokens #1056
Règles sous `.mt-modal-sheet` / `.mt-etiq-band--add` utilisent `var(--mt-*)` résolus sur
`.mt-modal-sheet` (fix #1056).

### Comportement
Aucun changement métier : mêmes endpoints, mêmes policies, même payload. Front + CSS only.

## DÉPLOIEMENT-TEST

```bash
git pull origin main
php artisan journal:sync
php artisan view:clear
find app/ -name "*.php" -exec touch {} +
```

Pas de migration. Pas de route:clear.

## LEÇON
Quatre lots successifs ajoutant chacun son bloc en bas d’une même modale produisent un
empilement que personne n’a décidé — la structure doit être revue quand on y ajoute le
troisième bloc, pas le neuvième.

Complément (#1060) : en CSS, `overflow-y: auto` rend impossible `overflow-x: visible` sur
le même conteneur — un rail conçu pour dépasser d’un `.p-dialog-content` scrollable est
toujours rogné (et provoque un scroll horizontal). Préférer une gouttière réservée *dans*
le cadre plutôt qu’un débordement hors dialog téléporté.