From 585d31a374585bd1a8ab2b0c907cb0af601fb3be Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 14 Oct 2025 02:21:51 -0600
Subject: [PATCH] =?UTF-8?q?fix:=20mejorar=20visualizaci=C3=B3n=20responsiv?=
 =?UTF-8?q?e=20en=20m=C3=B3vil=20para=20metabase-debug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajustes realizados:

Components:
- MetabaseCardDisplay: grid responsive, queries con wrap, botones apilables
- MetabaseCardsTable: filtros verticales en móvil, acciones con wrap

Page:
- Header responsive con elementos apilados
- Stats en grid 2x2 para móvil, 4 columnas en desktop
- Tamaños de fuente adaptados con breakpoints

Todas las queries SQL y JSON ahora usan whitespace-pre-wrap y break-words
para aprovechar el espacio vertical en lugar de scroll horizontal.
---
 .../metabase/MetabaseCardDisplay.vue          | 10 +++----
 .../metabase/MetabaseCardsTable.vue           |  9 ++++---
 nuxt4-app/app/pages/metabase-debug.vue        | 27 ++++++++++---------
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue b/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
index 81ba6ba..6e8cb05 100644
--- a/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
+++ b/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
@@ -16,7 +16,7 @@
 
     <!-- Card Details -->
     <div class="space-y-3">
-      <div class="grid grid-cols-2 gap-4 text-sm">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
         <div>
           <span class="font-medium">Database ID:</span>
           <span class="ml-2">{{ card.database_id }}</span>
@@ -41,12 +41,12 @@
           <summary class="cursor-pointer text-sm font-medium text-primary">
             Ver SQL
           </summary>
-          <pre class="mt-2 p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs overflow-x-auto">{{ card.dataset_query.native.query }}</pre>
+          <pre class="mt-2 p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs overflow-x-auto whitespace-pre-wrap break-words">{{ card.dataset_query.native.query }}</pre>
         </details>
       </div>
 
       <!-- Actions -->
-      <div class="flex gap-2 mt-4 pt-4 border-t dark:border-gray-700">
+      <div class="flex flex-wrap gap-2 mt-4 pt-4 border-t dark:border-gray-700">
         <UButton
           @click="executeQuery"
           :loading="executing"
@@ -80,7 +80,7 @@
 
       <!-- Query Results -->
       <div v-if="queryResult" class="mt-4">
-        <div class="flex justify-between items-center mb-2">
+        <div class="flex flex-wrap justify-between items-center gap-2 mb-2">
           <h4 class="font-medium text-sm">Resultados</h4>
           <UBadge color="green">
             {{ queryResult.data?.rows?.length || 0 }} filas en {{ queryResult.running_time || 0 }}ms
@@ -88,7 +88,7 @@
         </div>
 
         <div class="overflow-x-auto">
-          <pre class="p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs">{{ JSON.stringify(queryResult.data, null, 2) }}</pre>
+          <pre class="p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(queryResult.data, null, 2) }}</pre>
         </div>
       </div>
 
diff --git a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
index d2b2a1b..0a8bd78 100644
--- a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
+++ b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-4">
     <!-- Filters and Search -->
-    <div class="flex gap-3">
+    <div class="flex flex-col sm:flex-row gap-3">
       <UInput
         v-model="search"
         placeholder="Buscar por nombre o ID..."
@@ -12,6 +12,7 @@
         v-model="selectedFilter"
         :options="filterOptions"
         placeholder="Filtrar..."
+        class="w-full sm:w-auto"
       />
     </div>
 
@@ -46,7 +47,7 @@
       </template>
 
       <template #actions-data="{ row }">
-        <div class="flex gap-1">
+        <div class="flex flex-wrap gap-1">
           <UButton
             @click.stop="executeCard(row)"
             :loading="executingCards.has(row.id)"
@@ -95,7 +96,7 @@
         </template>
 
         <div v-if="currentResult" class="space-y-3">
-          <div class="flex gap-4 text-sm">
+          <div class="flex flex-wrap gap-4 text-sm">
             <div>
               <span class="font-medium">Filas:</span>
               <span class="ml-2">{{ currentResult.data?.rows?.length || 0 }}</span>
@@ -113,7 +114,7 @@
           </div>
 
           <div class="overflow-x-auto max-h-96">
-            <pre class="p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs">{{ JSON.stringify(currentResult.data, null, 2) }}</pre>
+            <pre class="p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(currentResult.data, null, 2) }}</pre>
           </div>
         </div>
 
diff --git a/nuxt4-app/app/pages/metabase-debug.vue b/nuxt4-app/app/pages/metabase-debug.vue
index 810497a..468d148 100644
--- a/nuxt4-app/app/pages/metabase-debug.vue
+++ b/nuxt4-app/app/pages/metabase-debug.vue
@@ -2,10 +2,10 @@
   <div class="container mx-auto px-4 py-8">
     <div class="space-y-6">
       <!-- Header -->
-      <div class="flex justify-between items-start">
-        <div>
-          <h1 class="text-3xl font-bold">Metabase Debug</h1>
-          <p class="text-gray-600 dark:text-gray-400 mt-1">
+      <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
+        <div class="flex-1">
+          <h1 class="text-2xl sm:text-3xl font-bold">Metabase Debug</h1>
+          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1">
             Herramienta de debugging para queries de Metabase
           </p>
         </div>
@@ -16,38 +16,39 @@
           icon="i-heroicons-arrow-path"
           color="primary"
           variant="soft"
+          class="w-full sm:w-auto"
         >
           Actualizar
         </UButton>
       </div>
 
       <!-- Stats -->
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+      <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
         <UCard>
           <div class="text-center">
-            <div class="text-3xl font-bold text-primary">{{ cards.length }}</div>
-            <div class="text-sm text-gray-600 dark:text-gray-400">Total Cards</div>
+            <div class="text-2xl sm:text-3xl font-bold text-primary">{{ cards.length }}</div>
+            <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Cards</div>
           </div>
         </UCard>
 
         <UCard>
           <div class="text-center">
-            <div class="text-3xl font-bold text-primary">{{ nativeQueries }}</div>
-            <div class="text-sm text-gray-600 dark:text-gray-400">SQL Nativo</div>
+            <div class="text-2xl sm:text-3xl font-bold text-primary">{{ nativeQueries }}</div>
+            <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">SQL Nativo</div>
           </div>
         </UCard>
 
         <UCard>
           <div class="text-center">
-            <div class="text-3xl font-bold text-green-600">{{ queryBuilderQueries }}</div>
-            <div class="text-sm text-gray-600 dark:text-gray-400">Query Builder</div>
+            <div class="text-2xl sm:text-3xl font-bold text-green-600">{{ queryBuilderQueries }}</div>
+            <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Query Builder</div>
           </div>
         </UCard>
 
         <UCard>
           <div class="text-center">
-            <div class="text-3xl font-bold text-gray-600">{{ panoramaQueries.length }}/9</div>
-            <div class="text-sm text-gray-600 dark:text-gray-400">Queries Panorama</div>
+            <div class="text-2xl sm:text-3xl font-bold text-gray-600">{{ panoramaQueries.length }}/9</div>
+            <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Queries Panorama</div>
           </div>
         </UCard>
       </div>