---
suivi: 1271
date: 2026-08-11
sujet: Correctif largeur saisie dépôt — truncate selects, gap cartes, sans overflow-x-hidden
chantier: depot-factures
type: front
statut: poussé
hash: 842c6103
fichiers:
  - resources/js/Pages/DepotFactures/DepotFactureSaisieForm.vue
  - database/data/journal_mises_a_jour_post_2026_06_12.php
  - public/build/
---

# SUIVI #1271 — Largeur panneau SAISIE (sans masquer le débordement)

## PROMPT ENVOYÉ

Troisième passe présentation (#1264, #1270) : le #1270 a posé `overflow-x-hidden` — scrollbar disparue mais texte coupé. Corriger la cause (select Marché qui dicte la largeur), retirer le masquage, espacer les cartes, Destination entière.

## Fiches lues

- `SUIVI_1270_depot_sous_menu_et_cartes.md` — LEÇON à corriger : overflow-x-hidden ≠ correction ; actions Ariane à ne pas toucher.
- `SUIVI_1264_refonte_depot_facture.md` — Situation désactivée, PROJETS grisé.
- `SUIVI_1268` / `1267` — contenu MONTANT/RETENUES intouchable.
- `SUIVI_1269` — ne pas toucher `Index.vue`.

## LEÇON

Masquer un débordement n’est pas le corriger. `overflow-x-hidden` transforme un symptôme visible (scrollbar) en défaut invisible (texte perdu). Le critère de réussite porte sur la **lisibilité** (`scrollWidth === clientWidth` **et** textes lisibles / tronqués avec infobulle), pas sur l’absence de scrollbar seule.

## Technique select (cause racine)

Sélecteurs scoped `.depot-saisie-form` :

| Cible | CSS |
|---|---|
| `.p-select` | `min-width: 0; max-width: 100%; width: 100%` |
| `.p-select-label` | `overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0` |
| `.p-select-dropdown` | `flex-shrink: 0` |
| `.p-autocomplete` / `.p-autocomplete-input` | même contrainte + ellipsis |

Infobulle : `syncDepotSelectTitleTooltips()` (+ MutationObserver) copie le texte affiché dans `title` sur `.p-select-label` et `.p-autocomplete-input`. Liste déroulante inchangée (overlay PrimeVue hors label).

Composants partagés `ProgrammeSearchSelect` / `DocumentsJointsPanel` : **non modifiés** → `Factures/Show.vue` et `Marches/Show.vue` inchangés.

## Autres

- Retrait de tout `overflow-x-hidden` sur le chemin du formulaire.
- Destination : groupe sous le libellé, `text-[11px]/xs`, `whitespace-nowrap`, pleine largeur carte.
- Num Facture / Situation empilés (plus côte à côte étroits).
- Totaux MONTANT en colonne + `break-words` ; aide MONTANT `break-words`.
- Conteneur cartes : `flex flex-col gap-6` (espace franc).
- Teleport / AppShell / Index : non touchés.

## Vérification Chrome

Pas de session ERP authentifiée. Fixture HTTP 3 colonnes à **1280 px** (panneau SAISIE ~378 px) + mesures CDP :

- `scrollWidth === clientWidth` : oui
- PROJETS entier : oui
- Marché ellipsis + title complet : oui
- Situation / Total TTC / aide MONTANT : oui

Revalidation manuelle prod (depot réel + PrimeVue) reste à faire par Robin (tests listés).

## DÉPLOIEMENT

```
git pull origin main
php artisan optimize:clear
php artisan view:clear
php artisan journal:sync
```