From 5a35f64a9d36f89d2c0d874ae6bb421257d21691 Mon Sep 17 00:00:00 2001 From: louispaulb Date: Sat, 4 Jul 2026 20:56:11 -0400 Subject: [PATCH] =?UTF-8?q?fix(ops/mobile):=20Network=20GPON=20tient=20sur?= =?UTF-8?q?=20mobile=20(onglets=20d=C3=A9filants=20+=20arbre=20enroul?= =?UTF-8?q?=C3=A9=20+=20boutons=20tactiles)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit NetworkPage débordait de ~118px à 375px. Deux causes corrigées : - Barre d'onglets (4 onglets = 435px) non bornée dans une rangée flex → ne déclenchait pas le défilement natif de Quasar. Ajout global `.q-tabs { max-width:100% }` en mobile (app.scss) : Quasar réactive son scroll (aucun effet là où déjà borné). - Arbre GPON : en-têtes OLT/slot/port en flex non-enroulé (nom·IP·adresse·nb clients·SNMP·slots·éditer) → débordement. `flex-wrap:wrap` + neutralisation du `margin-left:auto` des compteurs sur mobile. - Boutons d'action de l'arbre (éditer OLT, ajouter port, éditer lieu) étaient révélés au survol (opacity:0) → invisibles au tactile. Toujours visibles < 600px. Vérifié à 375px : docScrollW 493→375, en-têtes enroulées, crayon éditer visible. Portée strictement mobile (@media max-width:599px) — desktop inchangé. Co-Authored-By: Claude Opus 4.8 --- apps/ops/src/css/app.scss | 3 +++ apps/ops/src/pages/NetworkPage.vue | 8 ++++++++ 2 files changed, 11 insertions(+) diff --git a/apps/ops/src/css/app.scss b/apps/ops/src/css/app.scss index 7a1440c..5cfa965 100644 --- a/apps/ops/src/css/app.scss +++ b/apps/ops/src/css/app.scss @@ -254,6 +254,9 @@ body { champs à largeur fixe inline (style="width:NNNpx" : recherches, dates, nombres) bornés à l'espace dispo. */ .q-field[style*="width"] { max-width: 100% !important; } .q-menu .q-list { max-width: 100% !important; } + /* Barres d'onglets (q-tabs) non bornées dans une rangée flex : on les cadre à l'écran + pour que Quasar réactive son défilement natif au lieu de déborder (ex. NetworkPage : 4 onglets = 435px). */ + .q-tabs { max-width: 100% !important; } /* Cibles tactiles : boutons icône denses ≥ 32px (confort au doigt). */ .q-btn--round.q-btn--dense { min-height: 32px; min-width: 32px; } /* Utilitaires opt-in pour rangées/en-têtes denses : wrap + troncature 1 ligne sur mobile (à poser au cas par cas). */ diff --git a/apps/ops/src/pages/NetworkPage.vue b/apps/ops/src/pages/NetworkPage.vue index f1be6a8..6e79301 100644 --- a/apps/ops/src/pages/NetworkPage.vue +++ b/apps/ops/src/pages/NetworkPage.vue @@ -1569,6 +1569,14 @@ onMounted(() => { .net-olt-slots { color: var(--ops-text-muted); font-size: 12px; font-weight: 400; } .net-olt-edit-btn { opacity: 0; transition: opacity .15s; } +/* Mobile — arbre GPON : les en-têtes (OLT/slot/port) empilent trop d'infos sur une ligne (nom·IP·adresse·nb clients·SNMP·slots·éditer) → on enroule. + Les boutons d'action révélés au survol (opacity:0) sont inaccessibles au doigt → toujours visibles sur tactile. */ +@media (max-width: 599px) { + .net-olt-header, .net-slot-header, .net-port-header { flex-wrap: wrap; } + .net-olt-count, .net-slot-count, .net-port-count { margin-left: 0; } + .net-olt-edit-btn, .net-port-add-btn, .net-loc-edit-btn { opacity: 1; } +} + .net-snmp-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 400; padding: 1px 8px;