From 94da547b1cc045ece96ebb863a5c4153e8282846 Mon Sep 17 00:00:00 2001 From: louispaulb Date: Thu, 23 Jul 2026 11:19:09 -0400 Subject: [PATCH] =?UTF-8?q?fix(planif):=20l'=C5=93il=20n'est=20plus=20pous?= =?UTF-8?q?s=C3=A9/clipp=C3=A9=20par=20un=20long=20tag=20groupe=20(A6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Régression du lot précédent : `.tech-col { width:360px; overflow:hidden }` coupait l'œil quand le contenu dépassait 360px (ex. groupe « Vente porte-à-porte », flex-shrink:0 sans max-width). - retire la largeur fixe + overflow:hidden sur .tech-col (la colonne s'ajuste, l'œil reste visible) - .grp tronque (max-width 90px + ellipsis, rétrécissable) → ne pousse plus l'œil - .hide-eye épinglé (flex-shrink:0) au bout de la rangée Co-Authored-By: Claude Opus 4.8 --- apps/ops/src/pages/PlanificationPage.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/ops/src/pages/PlanificationPage.vue b/apps/ops/src/pages/PlanificationPage.vue index 8f6eefb..bbcb9d9 100644 --- a/apps/ops/src/pages/PlanificationPage.vue +++ b/apps/ops/src/pages/PlanificationPage.vue @@ -6860,7 +6860,7 @@ onBeforeRouteLeave(async () => { await autosaveDraft() }) // #2 — flush le bro .roster-grid th, .roster-grid td { border: 1px solid #c7d0dc; text-align: center; padding: 2px; } /* séparateurs plus contrastés (était #eee, invisible sur le gris des cellules) */ .roster-grid th + th, .roster-grid td + td { border-left-color: #aab6c6; } /* séparateur de COLONNE (jour) plus marqué que les lignes — en-tête ET rangées */ .roster-grid thead th { position: sticky; top: 0; background: #fafafa; z-index: 1; } -.tech-col { position: sticky; left: 0; background: #fff; text-align: left !important; white-space: nowrap; padding: 2px 8px !important; min-width: 300px; max-width: 360px; width: 360px; overflow: hidden; z-index: 2; } /* overflow:hidden + width fixe → la colonne Ressource NE s'élargit PAS (badges/triangles entassés clippés) : la largeur du tableau reste stable → barre de défilement horizontale proportionnelle aux colonnes-jour, pas gonflée par le débordement */ +.tech-col { position: sticky; left: 0; background: #fff; text-align: left !important; white-space: nowrap; padding: 2px 8px !important; min-width: 300px; max-width: 360px; z-index: 2; } /* largeur bornée ; le contenu interne (nom/groupe) tronque → l'œil reste visible sans clipper la colonne */ .roster-grid thead .tech-col { z-index: 3; } .roster-grid tbody tr:hover td { background: #f0f7ff; } .roster-grid tbody tr:hover .tech-col { background: #f0f7ff; } @@ -6869,12 +6869,13 @@ th.holiday, td.holiday { background: #fff3e0; } th.clk, td.clk { cursor: pointer; } .dow { font-size: 10px; color: #999; text-transform: uppercase; } .dnum { font-size: 11px; font-weight: 600; } -.grp { font-size: 9px; color: #999; background: #f0f0f0; border-radius: 3px; padding: 0 4px; margin-left: 2px; } +.grp { font-size: 9px; color: #999; background: #f0f0f0; border-radius: 3px; padding: 0 4px; margin-left: 2px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; } /* tag groupe/rôle TRONQUÉ (ex. « Vente porte-à-porte ») → ne pousse plus l'œil hors de la colonne */ .role-ic { color: #546e7a; vertical-align: middle; margin-right: 3px; display: inline-flex; } /* icône de rôle monochrome (Lucide) */ .tech-row { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; min-width: 0; } .tech-name { white-space: nowrap; flex-shrink: 0; } .th { white-space: nowrap; flex-shrink: 0; } -.tech-row > .q-btn, .tech-row > .q-badge, .tech-row > .role-ic, .tech-row > .grp, .tech-row > .eff { flex-shrink: 0; } +.tech-row > .q-btn, .tech-row > .q-badge, .tech-row > .role-ic, .tech-row > .eff { flex-shrink: 0; } /* .grp exclu : il DOIT pouvoir rétrécir/tronquer (sinon un long groupe pousse l'œil) */ +.tech-row > .hide-eye { flex-shrink: 0; margin-left: 2px; } /* œil TOUJOURS au bout, jamais écrasé */ .tech-skills { display: flex; align-items: center; gap: 2px; overflow: hidden; flex: 1 1 auto; min-width: 0; } /* chips inline, débordement clippé */ .skill-edit-btn { flex-shrink: 0; } .skill-chip { font-size: 10px; line-height: 15px; height: 15px; padding: 0 5px; border-radius: 8px; color: #fff; font-weight: 600; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; }