From de798b00ce2edf8e95284da8cd09685c0e4ed801 Mon Sep 17 00:00:00 2001
From: Carlos Narro <carlos@relabtive.com>
Date: Sun, 31 May 2026 00:49:28 +0200
Subject: [PATCH] =?UTF-8?q?Hace=20responsive=20la=20tabla=20de=20precios?=
 =?UTF-8?q?=20en=20m=C3=B3vil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Las filas del catálogo y la cabecera CSV se desbordaban horizontalmente
en móvil (botones Guardar/Borrar fuera de pantalla), y ese overflow
horizontal desestabilizaba la barra de navegación fija. Las filas ahora
hacen wrap y el bloque <code> rompe palabra.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 mvp/b2c/src/app/panel/precios/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/mvp/b2c/src/app/panel/precios/page.tsx b/mvp/b2c/src/app/panel/precios/page.tsx
index 6c3b4fd..e77b81e 100644
--- a/mvp/b2c/src/app/panel/precios/page.tsx
+++ b/mvp/b2c/src/app/panel/precios/page.tsx
@@ -120,10 +120,10 @@ export default async function PreciosPage() {
             <div className="space-y-2">
               {items.length === 0 && <p className="text-sm text-gray-400">Sin materiales.</p>}
               {items.map((item) => (
-                <div key={item.id} className="flex items-center gap-3 text-sm border-b border-gray-100 pb-2">
-                  <span className="w-48 font-medium text-black">{item.nombre}</span>
+                <div key={item.id} className="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm border-b border-gray-100 pb-2">
+                  <span className="w-full sm:w-48 font-medium text-black">{item.nombre}</span>
                   <span className="w-20 text-gray-500 capitalize">{item.calidad}</span>
-                  <span className="w-16 text-gray-400">{item.unidad}</span>
+                  <span className="w-12 text-gray-400">{item.unidad}</span>
                   {item.esDefault && (
                     <span className="text-xs bg-green-100 text-green-700 rounded px-1.5 py-0.5">default</span>
                   )}
@@ -134,7 +134,7 @@ export default async function PreciosPage() {
                       type="number"
                       step="0.01"
                       defaultValue={item.precioUnit / 100}
-                      className="w-24 border border-gray-300 rounded-lg px-2 py-1 text-right"
+                      className="w-20 border border-gray-300 rounded-lg px-2 py-1 text-right"
                     />
                     <span className="text-gray-400">€</span>
                     <button className="text-xs text-blue-600 hover:underline">Guardar</button>
@@ -176,7 +176,7 @@ export default async function PreciosPage() {
       <section className="bg-white rounded-xl border border-gray-200 p-6">
         <h2 className="font-bold text-black mb-2">Importar catálogo (CSV)</h2>
         <p className="text-xs text-gray-500 mb-3">
-          Cabecera: <code>categoria,nombre,calidad,precio,unidad,descriptor_render,sku</code>. El
+          Cabecera: <code className="break-all">categoria,nombre,calidad,precio,unidad,descriptor_render,sku</code>. El
           precio en euros. Actualiza por SKU.
         </p>
         <form action={importarCatalogoCsv as unknown as (fd: FormData) => void}>