From 0fdcc56f90cb5068cc6df2e1de9291db57ee4e4c Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 28 Oct 2025 17:33:02 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20Mostrar=20botones=20de=20colapsar=20solo?=
 =?UTF-8?q?=20en=20m=C3=B3vil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ocultar botones de colapsar en vista desktop
- En móvil, contenedores colapsados ocupan solo el alto del header
- Mantener comportamiento desktop (52px width cuando colapsado)
- Mejorar UX en dispositivos móviles evitando contenedores inutilizables
---
 frontend/src/App.vue    |  4 ++--
 frontend/src/styles.css | 22 +++++++++++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cc70991..066c112 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -49,7 +49,7 @@
           <button class="icon-btn" title="Test" @click="selfTest"><img class="icon" src="/icons/test.svg" alt="test"></button>
           <a class="icon-btn" title="Descargar" href="/api/requests.csv" target="_blank"><img class="icon" src="/icons/download.svg" alt="descargar"></a>
           <button class="icon-btn" title="Copiar" @click="copyRequests"><img class="icon" src="/icons/copy.svg" alt="copiar"></button>
-          <button class="icon-btn" title="Colapsar" @click="sidebarCollapsed = !sidebarCollapsed">{{ sidebarCollapsed ? 'Expandir' : 'Colapsar' }}</button>
+          <button class="icon-btn collapse-btn" title="Colapsar" @click="sidebarCollapsed = !sidebarCollapsed">{{ sidebarCollapsed ? 'Expandir' : 'Colapsar' }}</button>
         </div>
       </div>
       <div class="scroll">
@@ -75,7 +75,7 @@
             <img class="icon" src="/icons/layout-devices.svg" alt="dispositivos"/> Dispositivos
           </button>
           <button class="icon-btn" title="Filtrar" @click="showUserFilters = true"><img class="icon" src="/icons/filter.svg" alt="filtro"/></button>
-          <button class="icon-btn" title="Colapsar" @click="mainCollapsed = !mainCollapsed">{{ mainCollapsed ? 'Expandir' : 'Colapsar' }}</button>
+          <button class="icon-btn collapse-btn" title="Colapsar" @click="mainCollapsed = !mainCollapsed">{{ mainCollapsed ? 'Expandir' : 'Colapsar' }}</button>
         </div>
       </div>
       <div class="scroll">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 52bc202..16c97fc 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -96,11 +96,31 @@ a { color: inherit; }
 .card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.12); }
 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
 
+/* Botones de colapsar: solo visibles en móvil */
+.collapse-btn {
+  display: none;
+}
+
 /* Responsive */
 @media (max-width: 980px) {
-  .shell { grid-template-columns: 1fr; grid-template-areas: 
+  .shell { grid-template-columns: 1fr; grid-template-areas:
     "main"
     "sidebar"; }
+
+  /* Mostrar botones de colapsar solo en móvil */
+  .collapse-btn {
+    display: inline-flex;
+  }
+
+  /* En móvil, desactivar el sistema de grid de 52px para contenedores colapsados */
+  .shell:has(> aside.collapsed) { grid-template-columns: 1fr; }
+  .shell:has(> main.collapsed)  { grid-template-columns: 1fr; }
+
+  /* En móvil, los paneles colapsados solo ocupan el espacio del header */
+  .panel.collapsed {
+    height: auto;
+    min-height: auto;
+  }
 }
 
 /* When a panel is collapsed, hide its scroll and shrink its grid track to show only header */