Inna/NightSpire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: el tooltip de wowhead salía con huecos enormes entre líneas

Browse Source 
El tooltip se inyecta en el <body>, 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 <th> 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 <th> 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) <noreply@anthropic.com>
This commit is contained in:
Inna Hoover Brown
2026-07-15 09:18:57 +00:00
parent 1752e74581
commit 553a9cf993
1 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-next/app/globals.css
+21
View File
@@ -40,6 +40,27 @@ input[type='number'] {
table {
border-collapse: separate;
}
/* El tooltip de wowhead se inyecta en el <body>, 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 <th> 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