Fix current match killfeed scroll container clipping

2026-06-16 18:21:24 +02:00
parent 2e96b6bcae
commit 222e4b9339
2 changed files with 169 additions and 31 deletions
--- 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
@@ -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.
+
+
--- 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 {