veza/docs/archive/frontend-sessions-2026/FIX_VISUEL_APPLIQUE.md
senke 0e7097ed1b chore(cleanup): J1 — purge 220MB debris, archive session docs (complete)
First-attempt commit 3a5c6e184 only captured the .gitignore change; the
pre-commit hook silently dropped the 343 staged moves/deletes during
lint-staged's "no matching task" path. This commit re-applies the intended
J1 content on top of bec75f143 (which was pushed in parallel).

Uses --no-verify because:
- J1 only touches .md/.json/.log/.png/binaries — zero code that would
  benefit from lint-staged, typecheck, or vitest
- The hook demonstrated it corrupts pure-rename commits in this repo
- Explicitly authorized by user for this one commit

Changes (343 total: 169 deletions + 174 renames):

Binaries purged (~167 MB):
- veza-backend-api/{server,modern-server,encrypt_oauth_tokens,seed,seed-v2}

Generated reports purged:
- 9 apps/web/lint_report*.json (~32 MB)
- 8 apps/web/tsc_*.{log,txt} + ts_*.log (TS error snapshots)
- 3 apps/web/storybook_*.json (1375+ stored errors)
- apps/web/{build_errors*,build_output,final_errors}.txt
- 70 veza-backend-api/coverage*.out + coverage_groups/ (~4 MB)
- 3 veza-backend-api/internal/handlers/*.bak

Root cleanup:
- 54 audit-*.png (visual regression baselines, ~11 MB)
- 9 stale MVP-era scripts (Jan 27, hardcoded v0.101):
  start_{iteration,mvp,recovery}.sh,
  test_{mvp_endpoints,protected_endpoints,user_journey}.sh,
  validate_v0101.sh, verify_logs_setup.sh, gen_hash.py

Session docs archived (not deleted — preserved under docs/archive/):
- 78 apps/web/*.md     → docs/archive/frontend-sessions-2026/
- 43 veza-backend-api/*.md → docs/archive/backend-sessions-2026/
- 53 docs/{RETROSPECTIVE_V,SMOKE_TEST_V,PLAN_V0_,V0_*_RELEASE_SCOPE,
          AUDIT_,PLAN_ACTION_AUDIT,REMEDIATION_PROGRESS}*.md
                        → docs/archive/v0-history/

README.md and CONTRIBUTING.md preserved in apps/web/ and veza-backend-api/.

Note: The .gitignore rules preventing recurrence were already pushed in
3a5c6e184 and remain in place — this commit does not modify .gitignore.

Refs: AUDIT_REPORT.md §11
2026-04-14 17:12:03 +02:00

3.2 KiB

Corrections Visuelles Appliquées

Problèmes Identifiés et Corrigés

1. Barre de défilement (Scrollbar) trop visible

Problème : La scrollbar cyan/magenta était très visible et distrayante

Corrections appliquées :

  • Réduction de la largeur de 8px à 4px
  • Réduction de l'opacité de rgba(0, 255, 247, 1.0) à rgba(0, 255, 247, 0.1)
  • Track transparent au lieu de couleur solide
  • Suppression des styles conflictuels dans premium-utilities.css
  • Fix JavaScript dans fixDisplayIssues.ts pour forcer les styles

Fichiers modifiés :

  • src/styles/global-effects.css : Styles de scrollbar réduits
  • src/styles/premium-utilities.css : Styles conflictuels commentés
  • src/utils/fixDisplayIssues.ts : Fix JavaScript pour forcer les styles

2. Effets de scanlines trop visibles

Problème : Les scanlines (body::after) étaient trop opaques

Corrections appliquées :

  • Réduction de l'opacité de 0.15 à 0.05
  • Réduction de l'opacité des lignes de rgba(0, 0, 0, 0.1) à rgba(0, 0, 0, 0.05)

Fichiers modifiés :

  • src/styles/global-effects.css : Opacité réduite pour body::after

3. Gradients verticaux (lignes verticales)

Problème : Des gradients verticaux (90deg) créaient des lignes visibles

Corrections appliquées :

  • Suppression des gradients verticaux dans global-effects.css
  • Fix JavaScript agressif dans fixDisplayIssues.ts pour supprimer tous les gradients verticaux
  • MutationObserver pour détecter et corriger les nouveaux éléments
  • Scan périodique pour supprimer les gradients verticaux

Fichiers modifiés :

  • src/styles/global-effects.css : Gradients verticaux supprimés
  • src/utils/fixDisplayIssues.ts : Fix agressif avec MutationObserver

Tests à Effectuer

  1. Scrollbar :

    • Vérifier que la scrollbar est discrète (4px, opacité 0.1)
    • Vérifier qu'elle devient légèrement plus visible au hover (opacité 0.2)
  2. Scanlines :

    • Vérifier que les scanlines sont subtiles (opacité 0.05)
    • Vérifier qu'elles ne créent pas de lignes visibles
  3. Lignes verticales :

    • Vérifier qu'il n'y a plus de lignes verticales grises ou cyan
    • Vérifier que le fix JavaScript fonctionne (console: [FixDisplay])
  4. Bouton de connexion :

    • Vérifier que le bouton n'est pas désactivé par erreur
    • Vérifier que le bouton devient actif quand le formulaire est valide

Commandes de Test

# Vérifier les styles
cd apps/web && npm run build

# Lancer en dev et vérifier visuellement
cd apps/web && npm run dev

# Vérifier dans la console du navigateur
# - Ouvrir la console (F12)
# - Vérifier les messages [FixDisplay]
# - Vérifier qu'il n'y a pas d'erreurs CSS

Notes Importantes

  • Les corrections sont appliquées automatiquement en mode développement
  • Le fix JavaScript s'exécute au chargement de la page et périodiquement
  • Les styles CSS sont prioritaires via !important dans le fix JavaScript
  • Les conflits entre global-effects.css et premium-utilities.css sont résolus

Date : 2025-01-27 Statut : Corrections appliquées, en attente de test visuel