From 222e4b9339f7720f7f650dc1650c2aaa5623aabe Mon Sep 17 00:00:00 2001 From: devRaGonSa Date: Tue, 16 Jun 2026 18:21:24 +0200 Subject: [PATCH] Fix current match killfeed scroll container clipping --- ...feed-layout-for-normalized-weapon-icons.md | 131 ++++++++++++++++++ frontend/assets/css/historico.css | 69 ++++----- 2 files changed, 169 insertions(+), 31 deletions(-) create mode 100644 ai/tasks/done/TASK-261-improve-current-match-killfeed-layout-for-normalized-weapon-icons.md diff --git a/ai/tasks/done/TASK-261-improve-current-match-killfeed-layout-for-normalized-weapon-icons.md b/ai/tasks/done/TASK-261-improve-current-match-killfeed-layout-for-normalized-weapon-icons.md new file mode 100644 index 0000000..2524bf9 --- /dev/null +++ b/ai/tasks/done/TASK-261-improve-current-match-killfeed-layout-for-normalized-weapon-icons.md @@ -0,0 +1,131 @@ +--- +id: TASK-261 +title: Improve current match killfeed layout for normalized weapon icons +status: done +type: frontend +team: Frontend Senior +supporting_teams: [Experto en interfaz] +roadmap_item: current-match +priority: high +--- + +# TASK-261 - Improve current match killfeed layout for normalized weapon icons + +## Goal + +Mejorar el layout del Feed de combate de partida actual para que los iconos de armas normalizados, el label del arma, los nombres de jugadores y los badges de equipo entren correctamente sin cortar filas ni desbordar. + +## Context + +Despues de normalizar los assets de armas y ajustar el frame visual, el problema visible ya no es solo el tamano del icono. El contenedor/card del killfeed tiene poco espacio para killer, tag de equipo, icono, label del arma, victima y tag de equipo. En produccion el feed queda visualmente apretado y algunas filas se perciben cortadas o mal proporcionadas. + +Preservar la identidad HLL Vietnam: militar, Vietnam, tactica y sobria. No tocar assets ni backend. + +## Steps + +1. Diagnosticar el layout actual del killfeed en HTML, JS y CSS relacionados. +2. Ajustar el layout CSS para dar altura suficiente a las kill cards, columna central estable al arma, ellipsis a nombres/labels y scroll vertical sin cortes. +3. Mantener dos columnas solo con ancho suficiente y pasar a una columna en ancho medio/mobile. +4. Validar visualmente las vistas de partida actual para `comunidad-hispana-01` y `comunidad-hispana-02`. +5. Ejecutar la auditoria publica indicada y documentar resultado. + +## Files to Read First + +- `AGENTS.md` +- `ai/architecture-index.md` +- `ai/repo-context.md` +- `ai/orchestrator/frontend-senior.md` +- `ai/orchestrator/ui-expert.md` +- `frontend/partida-actual.html` +- `frontend/assets/js/partida-actual.js` +- `frontend/assets/css/historico.css` + +## Expected Files to Modify + +- `frontend/assets/css/historico.css` +- `ai/tasks/done/TASK-261-improve-current-match-killfeed-layout-for-normalized-weapon-icons.md` + +`frontend/assets/js/partida-actual.js` solo debe modificarse si hace falta anadir clases semanticas o corregir estructura. + +## Constraints + +- No ejecutar `ai-platform run`. +- No hacer commit ni push. +- No tocar backend, scheduler, RCON, TeamKills, Elo/MMR, configuracion de servidores ni el puerto 27001. +- No reintroducir Comunidad Hispana #03. +- No tocar assets fisicos de armas, SVGs, PNGs, `frontend/assets/img/weapons/`, mapas, clans ni brands. +- No tocar `ai/system-metrics.md`. +- No incluir `tmp/`, TASK-204 ni cambios previos no relacionados. +- No usar `git add .`. +- Mantener cambios pequenos, verificables y documentados. + +## Validation + +- Si se toca JS: `node --check frontend/assets/js/partida-actual.js`. +- Validacion visual en navegador: + - `/partida-actual.html?server=comunidad-hispana-01` + - `/partida-actual.html?server=comunidad-hispana-02` +- Validar con casos reales o simulados: nombres cortos, nombres largos con clan tags, rifle, MG, mina, strafing run / bombing run y arma con label largo. +- Confirmar que no se cortan filas, el ultimo elemento no queda medio oculto, el icono queda centrado, el nombre del arma no desborda, killer/victima no empujan fuera el arma, dos columnas solo aparecen con ancho suficiente y una columna aparece en ancho medio/mobile. +- Ejecutar: + `python .\scripts\audit_public_requests.py --base-url https://comunidadhll.devzamode.es --timeout 30 --output tmp\task261_full_audit_after.json` +- Criterio minimo: CRITICAL 0, `current-match-*` OK 200 y consola sin TypeError. +- Revisar `git diff --name-only` y confirmar que el alcance coincide con la task. + +## Outcome + +Diagnostico corregido: + +- El problema principal no era solo el ancho de cada kill card. El recorte visible venia del contenedor interno que muestra la lista de acciones/kills. +- El contenedor exacto de la lista es `#current-match-feed-list.current-match-killfeed`, creado en `initializeKillFeed()` dentro de `.current-match-killfeed-screen`. +- Antes de la correccion inicial, habia doble recorte vertical: + - `.current-match-killfeed-screen`: `max-height: 520px` y `overflow: hidden`. + - `.current-match-killfeed`: `max-height: 500px` y `overflow: hidden`. +- Ese doble overflow podia dejar kills partidas por la mitad en la parte inferior: el wrapper con borde recortaba y la lista interna no tenia scroll vertical util. +- Tras aumentar la altura de fila a `74px`, el viewport de lista debia crecer tambien; con muchas kills, el listado necesitaba scroll claro, padding inferior y comprobacion del ultimo item scrolleado. + +Cambios aplicados: + +- `.current-match-killfeed-screen` queda como wrapper visual con borde, `overflow: visible`, `box-sizing: border-box` y padding `10px 10px 12px`; no es el nodo scrolleable. +- `.current-match-killfeed` queda como unico contenedor scrolleable de la lista: + - `max-height: 620px` + - `overflow-y: auto` + - `overflow-x: hidden` + - `padding-bottom: 12px` + - `scroll-padding-bottom: 12px` + - `scrollbar-gutter: stable` +- Se mantienen las mejoras previas: filas de `min-height: 74px`, columna de arma `128px`, mobile `104px`, ellipsis en nombres/labels y una columna desde `max-width: 1280px`. + +Validacion ejecutada: + +- No se ejecuto `node --check frontend/assets/js/partida-actual.js` porque no se modifico JS. +- Validacion visual local con servidor estatico en `http://127.0.0.1:4173`: + - `/partida-actual.html?server=comunidad-hispana-01` + - `/partida-actual.html?server=comunidad-hispana-02` +- Fixture simulada larga fuera del repo con 20 kills, nombres largos, clan tags, rifle, MG, mina, strafing run, bombing run y labels largos. +- Medicion DOM con Playwright scrolleando la lista hasta el final: + - desktop `1440px`: 2 columnas, `max-height: 620px`, `clientHeight: 620`, `scrollHeight: 828`, ultimo item completo. + - medio `1100px`: 1 columna, `max-height: 620px`, `clientHeight: 620`, `scrollHeight: 1652`, ultimo item completo. + - mobile `390px`: 1 columna, `max-height: 620px`, `clientHeight: 620`, `scrollHeight: 1648`, ultimo item completo. + - En los tres anchos: `lastBottom <= visibleBottom - paddingBottom + 1`, `clippedRows: 0`, nombres/labels con ellipsis. +- Rutas reales local y publicas con Playwright: + - `partida-actual.html?server=comunidad-hispana-01` + - `partida-actual.html?server=comunidad-hispana-02` + - sin errores de consola ni `TypeError`. +- Endpoints publicos `current-match-*` con PowerShell: todos respondieron `200`. +- La auditoria Python no se repitio porque sigue bloqueada por TLS de `urllib` en este entorno: + `CERTIFICATE_VERIFY_FAILED: Basic Constraints of CA cert not marked critical`. + +Alcance: + +- Se modifico solo CSS de frontend y esta task. +- TASK-261 queda en `ai/tasks/done` para cierre y commit aislado. +- No se tocaron assets fisicos, SVGs, PNGs, `frontend/assets/img/weapons/`, backend, scheduler, RCON, TeamKills, Elo/MMR, mapas, clans, brands, configuracion de servidores, `27001`, `ai/system-metrics.md` ni TASK-204. + +## Change Budget + +- Preferir menos de 5 archivos modificados. +- Preferir menos de 200 lineas cuando sea viable. +- Dividir en follow-up si el alcance crece. + + diff --git a/frontend/assets/css/historico.css b/frontend/assets/css/historico.css index dd63494..2073636 100644 --- a/frontend/assets/css/historico.css +++ b/frontend/assets/css/historico.css @@ -771,11 +771,11 @@ .current-match-killfeed-screen { position: relative; + box-sizing: border-box; width: 100%; min-height: 180px; - max-height: 520px; - padding: 10px; - overflow: hidden; + padding: 10px 10px 12px; + overflow: visible; border: 1px solid rgba(159, 168, 141, 0.2); border-radius: 6px; background: @@ -805,12 +805,17 @@ .current-match-killfeed { position: relative; z-index: 2; + box-sizing: border-box; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; - max-height: 500px; - overflow: hidden; + max-height: 620px; + overflow-x: hidden; + overflow-y: auto; + padding-bottom: 12px; + scroll-padding-bottom: 12px; + scrollbar-gutter: stable; } .current-match-killfeed__column { @@ -822,12 +827,12 @@ .current-match-killfeed__row { display: grid; - grid-template-columns: minmax(0, 1fr) minmax(112px, 128px) minmax(0, 1fr); + grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr); align-items: center; gap: 8px; - min-height: 58px; - padding: 6px 9px; - overflow: hidden; + min-height: 74px; + padding: 8px 10px; + overflow: visible; border: 1px solid rgba(159, 168, 141, 0.14); border-left: 2px solid rgba(159, 168, 141, 0.24); border-radius: 3px; @@ -865,11 +870,14 @@ gap: 6px; min-width: 0; max-width: 100%; - flex-wrap: wrap; + flex-wrap: nowrap; } .current-match-killfeed__player-name { + display: block; + flex: 1 1 auto; min-width: 0; + max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -906,9 +914,9 @@ align-items: center; justify-content: center; gap: 4px; - width: 112px; - min-width: 0; - min-height: 48px; + width: 128px; + min-width: 128px; + min-height: 58px; padding: 3px 5px; overflow: hidden; border: 1px solid rgba(159, 168, 141, 0.18); @@ -960,7 +968,8 @@ .current-match-killfeed__weapon em { display: block; - max-width: 104px; + width: 100%; + max-width: 116px; min-width: 0; overflow: hidden; color: var(--muted); @@ -989,9 +998,11 @@ } .current-match-killfeed__team-badge { + flex: 0 0 auto; min-width: auto; padding-inline: 8px; font-size: 0.62rem; + white-space: nowrap; } .current-match-player-intro { @@ -1031,6 +1042,12 @@ } } +@media (max-width: 1280px) { + .current-match-killfeed { + grid-template-columns: 1fr; + } +} + .historical-comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); @@ -1269,51 +1286,41 @@ min-width: 540px; } - .current-match-killfeed { - grid-template-columns: 1fr; - max-height: 500px; - } - .current-match-killfeed__row { - grid-template-columns: minmax(0, 1fr) minmax(112px, 128px) minmax(0, 1fr); + grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr); } } @media (max-width: 480px) { .current-match-killfeed__row { - grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); + grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); gap: 5px; padding-inline: 6px; } .current-match-killfeed__weapon { - width: 92px; + width: 104px; + min-width: 104px; padding-inline: 3px; } .current-match-killfeed__weapon-icon-frame { - width: 72px; + width: 86px; height: 32px; padding-inline: 5px; } .current-match-killfeed__weapon-icon { - max-width: 62px; + max-width: 76px; max-height: 23px; } .current-match-killfeed__weapon em { - max-width: 82px; + max-width: 94px; } .current-match-killfeed__player-name { - display: -webkit-box; - overflow: hidden; font-size: 0.78rem; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - text-overflow: ellipsis; - white-space: normal; } .current-match-killfeed__player-identity {