---
suivi: 1060
date: 2026-07-29
sujet: Fix rail étiquettes tronqué + scroll horizontal
chantier: taches_suivi
type: fix
statut: poussé
hash: 98eda2f4
fichiers:
  - resources/js/Components/TachesSuivi/TacheSuiviDetailModal.vue
  - resources/css/mes-taches.css
  - docs/suivi/SUIVI_1057_ux_modale_tache.md
  - public/build/
---

## PROMPT ENVOYÉ

SUIVI #1060 — correctif visuel #1057 : rail étiquettes tronqué + barre de scroll
horizontale dans TacheSuiviDetailModal. Front + CSS uniquement.

## SYNTHÈSE

### Cause exacte
`.mt-modal-sheet.mt-modal-detail .p-dialog-content` avait `overflow-y: auto` et
`overflow-x: visible`. En CSS, dès qu’un axe n’est pas `visible`, l’autre ne peut pas
rester `visible` (il est calculé en `auto`). Le rail en `position: absolute` +
`translateX(100%)` dépassait donc hors cadre → rogné + scroll horizontal.

### Approche retenue
Gouttière réservée **dans** la modale (flex : corps + rail sticky à droite), plus de
débordement hors dialog. Bandes toujours empilées, libellé horizontal, ellipsis + tooltip
si trop long. Responsive ≤840px : rail en rangée en tête (order -1).

### Journal
NON — correctif d’affichage d’une UX déjà journalisée au #1057.

## DÉPLOIEMENT-TEST

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

Pas de migration. Pas de journal:sync. Pas de route:clear.

## LEÇON
En CSS, `overflow-y: auto` rend impossible `overflow-x: visible` sur le même conteneur —
un élément conçu pour dépasser d’un cadre scrollable sera toujours rogné.