Fix current match killfeed visible item limit

ai/tasks/done/TASK-261-improve-current-match-killfeed-layout-for-normalized-weapon-icons.md

@@ -24,10 +24,11 @@ Preservar la identidad HLL Vietnam: militar, Vietnam, tactica y sobria. No tocar
 ## 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.
+2. Ajustar el layout CSS para dar altura suficiente a las kill cards, columna central estable al arma y ellipsis a nombres/labels.
-3. Mantener dos columnas solo con ancho suficiente y pasar a una columna en ancho medio/mobile.
+3. Eliminar scroll interno del feed de combate.
-4. Validar visualmente las vistas de partida actual para `comunidad-hispana-01` y `comunidad-hispana-02`.
+4. Limitar en frontend el numero de eventos renderizados para mostrar solo filas completas.
-5. Ejecutar la auditoria publica indicada y documentar resultado.
+5. Mantener dos columnas solo con ancho suficiente y pasar a una columna en ancho medio/mobile.
+6. Validar visualmente las vistas de partida actual para `comunidad-hispana-01` y `comunidad-hispana-02`.
 
 ## Files to Read First
 
@@ -43,9 +44,10 @@ Preservar la identidad HLL Vietnam: militar, Vietnam, tactica y sobria. No tocar
 ## Expected Files to Modify
 
 - `frontend/assets/css/historico.css`
+- `frontend/assets/js/partida-actual.js`
 - `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.
+`frontend/assets/js/partida-actual.js` se modifica para limitar los eventos visibles por breakpoint.
 
 ## Constraints
 
@@ -67,47 +69,42 @@ Preservar la identidad HLL Vietnam: militar, Vietnam, tactica y sobria. No tocar
   - `/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:
+- No repetir la auditoria Python si sigue bloqueada por TLS de `urllib`; documentar el bloqueo si aplica.
-  `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 usuario no quiere scroll interno en el Feed de combate.
 - 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:
+- La correccion anterior quitaba cortes, pero convertia `#current-match-feed-list.current-match-killfeed` en nodo scrolleable con `max-height: 620px`, `overflow-y: auto`, `scroll-padding-bottom` y `scrollbar-gutter`.
-  - `.current-match-killfeed-screen`: `max-height: 520px` y `overflow: hidden`.
+- El comportamiento correcto es renderizar solo las bajas recientes que caben completas y ocultar eventos mas antiguos cuando hay demasiados.
-  - `.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.
+- Se elimino el scroll interno de `.current-match-killfeed`:
-- `.current-match-killfeed` queda como unico contenedor scrolleable de la lista:
+  - sin `overflow-y: auto`
-  - `max-height: 620px`
+  - sin `scrollbar-gutter`
-  - `overflow-y: auto`
+  - sin `scroll-padding-bottom`
-  - `overflow-x: hidden`
+  - `max-height: none`
-  - `padding-bottom: 12px`
+  - `overflow: visible`
-  - `scroll-padding-bottom: 12px`
+- `.current-match-killfeed-screen` se mantiene como wrapper visual con `overflow: visible`, `box-sizing: border-box` y padding `10px 10px 12px`.
-  - `scrollbar-gutter: stable`
+- `frontend/assets/js/partida-actual.js` limita los eventos visibles antes de renderizar:
+  - desktop ancho: maximo 12 kills
+  - ancho medio / una columna: maximo 6 kills
+  - mobile: maximo 5 kills
+- Si hay mas eventos almacenados que visibles, el estado muestra: `Mostrando las últimas N bajas detectadas.`
 - 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.
+- `node --check frontend/assets/js/partida-actual.js`: OK.
-- Validacion visual local con servidor estatico en `http://127.0.0.1:4173`:
+- Browser plugin: no se pudo usar porque la herramienta requerida `node_repl js` no esta expuesta; se uso Playwright local como fallback.
-  - `/partida-actual.html?server=comunidad-hispana-01`
+- Fixture larga de 20 kills interceptando las APIs de la pagina real:
-  - `/partida-actual.html?server=comunidad-hispana-02`
+  - desktop `1440px`: renderiza 12 kills, 2 columnas, `overflow-y: visible`, `scrollHeight == clientHeight`, sin scrollbar interno, `clippedRows: 0`, copy `Mostrando las últimas 12 bajas detectadas.`
-- Fixture simulada larga fuera del repo con 20 kills, nombres largos, clan tags, rifle, MG, mina, strafing run, bombing run y labels largos.
+  - medio `1100px`: renderiza 6 kills, 1 columna, `overflow-y: visible`, `scrollHeight == clientHeight`, sin scrollbar interno, `clippedRows: 0`, copy `Mostrando las últimas 6 bajas detectadas.`
-- Medicion DOM con Playwright scrolleando la lista hasta el final:
+  - mobile `390px`: renderiza 5 kills, 1 columna, `overflow-y: visible`, `scrollHeight == clientHeight`, sin scrollbar interno, `clippedRows: 0`, copy `Mostrando las últimas 5 bajas detectadas.`
-  - 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`
@@ -118,7 +115,6 @@ Validacion ejecutada:
 
 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.
 

frontend/assets/css/historico.css

@@ -810,12 +810,8 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
   align-items: start;
   gap: 8px;
-  max-height: 620px;
+  max-height: none;
-  overflow-x: hidden;
+  overflow: visible;
-  overflow-y: auto;
-  padding-bottom: 12px;
-  scroll-padding-bottom: 12px;
-  scrollbar-gutter: stable;
 }
 
 .current-match-killfeed__column {
@@ -868,8 +864,10 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  width: 100%;
   min-width: 0;
   max-width: 100%;
+  overflow: hidden;
   flex-wrap: nowrap;
 }
 

frontend/assets/js/partida-actual.js

@@ -10,6 +10,9 @@ const CURRENT_MATCH_SCOREBOARDS = Object.freeze({
   "comunidad-hispana-02": "https://scoreboard.comunidadhll.es:5443",
 });
 const CURRENT_MATCH_KILL_FEED_LIMIT = 18;
+const CURRENT_MATCH_KILL_FEED_VISIBLE_LIMIT_DESKTOP = 12;
+const CURRENT_MATCH_KILL_FEED_VISIBLE_LIMIT_MEDIUM = 6;
+const CURRENT_MATCH_KILL_FEED_VISIBLE_LIMIT_MOBILE = 5;
 
 document.addEventListener("DOMContentLoaded", () => {
   const params = new URLSearchParams(window.location.search);
@@ -192,6 +195,7 @@ function initializeKillFeed(nodes) {
     byId: new Map(),
     latestEventId: "",
     visibleSignature: "",
+    visibleCount: 0,
   };
 }
 
@@ -238,19 +242,38 @@ function renderKillFeed(data, nodes, state) {
   if (events.length === 0) {
     nodes.feedList.innerHTML = "";
     state.visibleSignature = "";
+    state.visibleCount = 0;
     setState(nodes.feedState, "Todavía no se han detectado bajas en esta partida.");
     return;
   }
-  const visualEvents = events;
+  const visibleLimit = getKillFeedVisibleLimit();
-  const visibleSignature = visualEvents.map((event) => event.event_id).join("|");
+  const visualEvents = events.slice(-visibleLimit);
+  const visibleSignature = `${visibleLimit}:${visualEvents
+    .map((event) => event.event_id)
+    .join("|")}`;
   if (visibleSignature !== state.visibleSignature) {
     nodes.feedList.innerHTML = renderKillFeedColumns(visualEvents);
     state.visibleSignature = visibleSignature;
+    state.visibleCount = visualEvents.length;
   }
-  nodes.feedState.textContent = formatKillFeedCoverage(data.scope);
+  nodes.feedState.textContent = formatKillFeedCoverage(
+    data.scope,
+    visualEvents.length,
+    events.length,
+  );
   nodes.feedState.classList.remove("historical-state--error");
 }
 
+function getKillFeedVisibleLimit() {
+  if (window.matchMedia("(max-width: 480px)").matches) {
+    return CURRENT_MATCH_KILL_FEED_VISIBLE_LIMIT_MOBILE;
+  }
+  if (window.matchMedia("(max-width: 1280px)").matches) {
+    return CURRENT_MATCH_KILL_FEED_VISIBLE_LIMIT_MEDIUM;
+  }
+  return CURRENT_MATCH_KILL_FEED_VISIBLE_LIMIT_DESKTOP;
+}
+
 function compareKillFeedEvents(left, right) {
   const leftTime = Number(left.server_time);
   const rightTime = Number(right.server_time);
@@ -690,7 +713,10 @@ function formatDuration(value) {
   return hours > 0 ? `${hours} h ${remainingMinutes} min` : `${minutes} min`;
 }
 
-function formatKillFeedCoverage(scope) {
+function formatKillFeedCoverage(scope, visibleCount = 0, totalCount = 0) {
+  if (visibleCount > 0 && totalCount > visibleCount) {
+    return `Mostrando las últimas ${visibleCount} bajas detectadas.`;
+  }
   if (scope === "open-admin-log-match-window") {
     return "Bajas detectadas en la partida actual.";
   }