---
suivi: 1584
date: 2026-09-16
sujet: Largeur pleine et séparateur mémorisé sur l’accès direct dépôt
chantier: depot-factures
type: front
statut: poussé
hash: 5c159a60
fichiers:
  - resources/js/Composables/useThreeColumnLayout.js
  - resources/js/Pages/DepotFactures/Show.vue
  - resources/js/Pages/DepotFactures/SaisieConsultation.vue
  - tests/Unit/DepotFactureLargeurDirecte1584SourceTest.php
  - database/data/journal_mises_a_jour_post_2026_06_12.php
  - public/build/
  - docs/suivi/SUIVI_1584_largeur_depot_facture.md
---

# SUIVI #1584 — Largeur pleine accès direct dépôt

## PROMPT ENVOYÉ

Lot d’affichage : `/depot-factures/{uuid}` corseté vs `/depot-factures` pleine largeur.
Établir la cause (composant, max-width) avant correction. Pleine largeur sur les deux
chemins. Séparateur PDF / saisie réglable et mémorisé, en réutilisant
`useThreeColumnLayout` s’il porte déjà les largeurs. Ne pas fusionner les deux
écrans. Ne pas toucher saisie / OCR / Restreindre (#1526).

## FICHES LUES

- **#1273 LEÇON** — `GET /depot-factures/{uuid}` rend `DepotFactures/Show`, pas Index ;
  les mails/alertes atterrissent volontairement sur Show. Ne pas unifier dans ce lot.
- **#1269 LEÇON** — Index `replaceState` cosmétique ; coller `/depot-factures/{uuid}`
  ouvre Show. Ne pas toucher Index.vue.
- **#1271 LEÇON** — ne pas masquer un débordement (`overflow-x-hidden`) ; lisibilité
  du PDF par largeur réelle de colonne + iframe `absolute inset-0` comme Index.
- **#1404 LEÇON** — composable partagé : options **additives** (défauts = 3 colonnes,
  clamp 5 %). Index et Comptabilisation ne passent pas les nouvelles options.
- **#1526** — bouton « Restreindre l’accès à cette facture » : statu quo, non modifié.

## CAUSE ÉTABLIE (avant correction)

Deux chemins, **deux composants Vue distincts** — pas le même écran.

| Chemin | Route | Contrôleur | Composant |
|---|---|---|---|
| A menu | `GET /depot-factures` | `DepotFactureController::index` | `resources/js/Pages/DepotFactures/Index.vue` |
| B direct | `GET /depot-factures/{uuid}` | `DepotFactureController::show` L648 `Inertia::render('DepotFactures/Show', …)` | `resources/js/Pages/DepotFactures/Show.vue` |

**Ce qui limitait B** (avant ce lot) :

1. Conteneur page `class="mx-auto max-w-7xl space-y-4"` — `max-w-7xl` = 80rem / 1280 px
   centré. C’est **cette classe**, pas AppShell. `AppShell.vue` L2195 : `<main class="flex-1 overflow-y-auto p-8">` identique pour A et B.
2. Mise en page **PrimeVue Splitter** 50/50 (`min-size="20"`), **sans** persistance.
3. iframe PDF `class="h-[80vh] w-full"` dans un panneau déjà étroit → barre horizontale.

**Chemin A** : déjà pleine largeur du `main` (`Index.vue` L1063 `flex min-h-0 flex-1 flex-col`,
pas de `max-w-7xl`). `useThreeColumnLayout` L207–210, `storageKey: 'depot-factures-col-prefs'`,
`defaultFr: [30, 35, 35]`. Le composable **mémorisait déjà** `fr` (ratios flex) + visibilité
des colonnes dans `localStorage` (`useThreeColumnLayout.js` `savePrefs` / `loadPrefs`).
Poignées `h12` / `h23` + chevrons `hideCol1` / `hideCol2` / `hideCol3` déjà en place.

**Troisième écran, même cause, non fusionné** : `DepotFactures/SaisieConsultation.vue`
(`GET /depot-factures/{uuid}/saisie`, « Voir la saisie » #1525) avait le même
`max-w-7xl` + Splitter. Corrigé **en parallèle** (largeur / poignée), structure propre
conservée. Pas de fusion Show ↔ Index ↔ Consultation.

## CORRECTION

- Show + Consultation : retrait `max-w-7xl` / `mx-auto` ; `w-full flex-1`.
- Remplacement Splitter par le **même** composable, `columnCount: 2`,
  `storageKey: 'depot-facture-direct-col-prefs'` (clé **distincte** de la boîte dépôt),
  `minColPx: 280`, iframe PDF comme Index (`absolute inset-0`, `overflow-hidden` sur la
  colonne — pas sur le formulaire).
- Composable : options `columnCount` (défaut 3) et `minColPx` (défaut 0). Appels Index et
  Comptabilisation **inchangés** → clamp 5 % et chevrons inchangés.

## ÉCRANS IMPACTÉS PAR LE COMPOSABLE

| Écran | Fichier | Appel modifié ? | Effet visuel |
|---|---|---|---|
| Boîte dépôt (menu) | `DepotFactures/Index.vue` | non (`columnCount`/`minColPx` absents) | inchangé, chevrons conservés |
| Comptabilisation | `Factures/Comptabilisation/Index.vue` | non | inchangé |
| Accès direct dépôt | `DepotFactures/Show.vue` | nouvel appel 2 col. | pleine largeur + poignée mémorisée |
| Consultation saisie | `DepotFactures/SaisieConsultation.vue` | nouvel appel 2 col. | idem |

Aucun autre consommateur de `useThreeColumnLayout` (grep `resources/js`).

## HORS PÉRIMÈTRE (respecté)

- `DepotFactureSaisieForm.vue`, OCR, validation, montants, rattachement : non touchés.
- Bouton Restreindre (#1526) : libellé toujours dans Show.vue.
- Pas de fusion Show → Index (#1273).
- Aucune migration. Aucun contrôleur PHP modifié.

## DÉPLOIEMENT-TEST

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

Pas de migrate. Pas de npm sur OVH.

## TESTS

Source (exécutés) : `php artisan test --filter=DepotFactureLargeurDirecte1584SourceTest`.
sqlite skipped = aucune valeur de preuve métier.

Navigateur (à faire par Robin) :
1. `/depot-factures/{uuid}` occupe toute la largeur du `main`.
2. PDF sans barre horizontale à l’ouverture.
3. La poignée déplace PDF / saisie.
4. Rechargement : la position est retrouvée (`localStorage` `depot-facture-direct-col-prefs`).
5. Un panneau ne peut pas être réduit sous ~280 px.
6. `/depot-factures` : 3 colonnes, chevrons, poignées inchangés.
7. Comptabilisation inchangée.

## LEÇON

`/depot-factures` et `/depot-factures/{uuid}` ne partagent pas le layout. Un `max-w-7xl`
sur Show suffit à rendre le PDF illisible alors que Index est déjà full-bleed. Réutiliser
`useThreeColumnLayout` (il mémorisait déjà `fr`) avec une **clé localStorage distincte**
et des options à défaut no-op, plutôt qu’un second mécanisme Splitter.