From 553a9cf993d04b8cdd5c44a21d3756fb52da54d8 Mon Sep 17 00:00:00 2001 From: adevopg Date: Wed, 15 Jul 2026 09:18:57 +0000 Subject: [PATCH] =?UTF-8?q?fix:=20el=20tooltip=20de=20wowhead=20sal=C3=ADa?= =?UTF-8?q?=20con=20huecos=20enormes=20entre=20l=C3=ADneas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit El tooltip se inyecta en el , así que le caen encima las reglas globales del tema. La culpable era `th { height: 40px }` (global, viene tal cual del tema original): el tooltip usa para la columna de la derecha (fase, tipo de arma, velocidad...), y cada una de esas filas se estiraba a 40px en vez de ~17. Cuatro filas de esas = los ~100px que sobraban. El store original no lo sufre porque su tooltip lo pinta otro script, con otro markup: es un problema que aparece al usar el tooltips.js de wowhead de verdad. Afectaba a TODAS las páginas con tooltips, no solo a la tienda. Medido contra una página desnuda con solo tooltips.js (misma versión, mismo ítem), que es la referencia de cómo debe verse: el tooltip pasa de 390px de alto a 289, exactamente el de la referencia. Las tablas del tema no se tocan: la regla va acotada a .wowhead-tooltip th, y el del carrito sigue midiendo 40px. De paso, el tooltip no tenía fondo y se leía la página a través de él. No era cosa nuestra —pasa igual en la página desnuda—: universal.css solo le da layout y colores de calidad, y el fondo lo pone el CSS de wowhead.com, que aquí no se carga. Se le da el fondo y el borde de las cajas del tema. Co-Authored-By: Claude Opus 4.8 (1M context) --- web-next/app/globals.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/web-next/app/globals.css b/web-next/app/globals.css index 5b6bed4..de034d9 100644 --- a/web-next/app/globals.css +++ b/web-next/app/globals.css @@ -40,6 +40,27 @@ input[type='number'] { table { border-collapse: separate; } +/* El tooltip de wowhead se inyecta en el , así que le caen encima las + reglas globales del tema. La que lo rompe es `th { height: 40px }` (global, + viene tal cual del tema original): el tooltip usa para la columna de la + derecha (fase, tipo de arma, velocidad…), y cada una de esas filas se estiraba + a 40px, dejando huecos enormes entre líneas. El store original no lo sufre + porque su tooltip lo pinta otro script con otro markup. Se neutraliza solo + dentro del tooltip: alto natural y sin el fondo de cabecera del tema. + `font-weight` no hace falta tocarlo: wowhead ya lo pone normal. */ +.wowhead-tooltip th { + height: auto; + background-color: transparent; +} +/* tooltips.js NO trae fondo para el tooltip (universal.css solo le da layout y + los colores de calidad): en wowhead.com lo pinta el CSS de su web, que aquí no + cargamos. Sin esto el tooltip es transparente y se lee la página a través de + él —se ve igual en una página desnuda con solo tooltips.js, no es cosa del + tema—. Se le da el fondo y el borde de las cajas del tema. */ +.wowhead-tooltip { + background: #0b0705; + border: 2px solid #352e2b; +} /* 3) Tailwind pone img{display:block}, lo que apila verticalmente los iconos en línea (monedas de oro/plata/cobre, iconos inline del tema). El tema los usa inline (como la web Django). Volvemos a inline; las imágenes que deban