From c193bcbf1fee95d534664673c81dd57a2c3c599c Mon Sep 17 00:00:00 2001
From: louispaulb <louis.targo@gmail.com>
Date: Sat, 4 Jul 2026 22:41:15 -0400
Subject: [PATCH] fix(ops): device detail modal responsive on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le panneau de détail (DetailModal) était un panneau droit fixe 600px/90vw
et la carte réseau d'EquipmentDetail (.topo-row = 4 nœuds fixes 90px + 3
liens ≈528px) débordait/rognait sur mobile (nœud « Internet » coupé, IP/
onglets tronqués). DetailModal : sur <sm → dialogue maximisé pleine
largeur (position bottom) au lieu du panneau droit ; desktop inchangé
(600px droite). EquipmentDetail @<600px : nœuds topo flex (largeur auto),
liens 18px, dv-grid 2 col, dv-row2 en colonne, diag-grid 1 col.

Vérifié live (C-LPB4, EQP-0000011366) : 375px → carte pleine largeur, 0
débordement horizontal (docScrollW=375), 4 nœuds topo visibles
(Internet→OLT→Modem→17 app.), 0 élément > viewport, 0 erreur ; 1280px →
panneau droit 600px inchangé.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/ops/src/components/shared/DetailModal.vue      |  8 ++++++--
 .../shared/detail-sections/EquipmentDetail.vue      | 13 +++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/ops/src/components/shared/DetailModal.vue b/apps/ops/src/components/shared/DetailModal.vue
index 1cb6b51..59290a5 100644
--- a/apps/ops/src/components/shared/DetailModal.vue
+++ b/apps/ops/src/components/shared/DetailModal.vue
@@ -1,6 +1,7 @@
 <template>
-  <q-dialog :model-value="open" @update:model-value="$emit('update:open', $event)" position="right" full-height>
-    <q-card style="width:600px;max-width:90vw" class="column no-wrap">
+  <q-dialog :model-value="open" @update:model-value="$emit('update:open', $event)"
+    :position="$q.screen.lt.sm ? 'bottom' : 'right'" :maximized="$q.screen.lt.sm" full-height>
+    <q-card :style="$q.screen.lt.sm ? 'width:100%;max-width:100%' : 'width:600px;max-width:90vw'" class="column no-wrap">
       <!-- Header -->
       <q-card-section class="row items-center q-pb-sm" style="border-bottom:1px solid var(--ops-border, #e2e8f0)">
         <div class="col">
@@ -58,8 +59,11 @@
 
 <script setup>
 import { computed } from 'vue'
+import { useQuasar } from 'quasar'
 import { erpLink } from 'src/composables/useFormatters'
 
+const $q = useQuasar()
+
 import InvoiceDetail from './detail-sections/InvoiceDetail.vue'
 import IssueDetail from './detail-sections/IssueDetail.vue'
 import PaymentDetail from './detail-sections/PaymentDetail.vue'
diff --git a/apps/ops/src/components/shared/detail-sections/EquipmentDetail.vue b/apps/ops/src/components/shared/detail-sections/EquipmentDetail.vue
index 49b5a2a..239e1c1 100644
--- a/apps/ops/src/components/shared/detail-sections/EquipmentDetail.vue
+++ b/apps/ops/src/components/shared/detail-sections/EquipmentDetail.vue
@@ -950,4 +950,17 @@ onUnmounted(() => stopWanLive())
 .adv-signal-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
 .adv-clients-table td:first-child { white-space: nowrap; }
 .adv-inactive-row { opacity: 0.5; font-style: italic; }
+
+/* Mobile (agents terrain) : la carte réseau et les grilles doivent tenir dans
+   l'écran plutôt que déborder/rogner (nœuds topo à largeur fixe = cause du clip). */
+@media (max-width: 600px) {
+  .topo-summary { padding: 10px; }
+  .topo-row { gap: 2px; }
+  .topo-node { width: auto; flex: 1 1 0; min-width: 0; }
+  .topo-cap, .topo-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .topo-link { max-width: 18px; }
+  .dv-grid { grid-template-columns: repeat(2, 1fr); }
+  .dv-row2 { flex-direction: column; }
+  .diag-grid { grid-template-columns: 1fr; }
+}
 </style>