63 lines
2.9 KiB
Markdown
63 lines
2.9 KiB
Markdown
# TASK-042-server-panel-grid-and-overflow-hardening
|
||
|
||
## Goal
|
||
Fortalecer la rejilla del panel de servidores y corregir problemas de compresión, desborde y distribución espacial en desktop, tablet y móvil.
|
||
|
||
## Context
|
||
El panel de servidores ya consume datos reales y funciona correctamente, pero la rejilla actual no está aprovechando bien el espacio horizontal y deja tarjetas demasiado estrechas. Además, la estructura necesita endurecerse frente a nombres largos, métricas densas y cambios de anchura de viewport.
|
||
|
||
## Steps
|
||
1. Revisar la rejilla actual del panel de servidores.
|
||
2. Ajustar el sistema de columnas para permitir una distribución más robusta y flexible.
|
||
3. Usar una estrategia de `grid` adecuada para:
|
||
- desktop ancho
|
||
- desktop medio
|
||
- tablet
|
||
- móvil
|
||
4. Revisar `min-width`, `max-width`, `gap`, `overflow-wrap` y cualquier punto de compresión o desborde.
|
||
5. Asegurar que las tarjetas no se rompan visualmente con contenido real.
|
||
6. Mantener una composición limpia, con buen aire y buen equilibrio.
|
||
7. No rediseñar toda la landing fuera del panel de servidores.
|
||
|
||
## Files to Read First
|
||
- AGENTS.md
|
||
- ai/repo-context.md
|
||
- frontend/index.html
|
||
- frontend/assets/css/styles.css
|
||
- frontend/assets/js/main.js
|
||
|
||
## Expected Files to Modify
|
||
- frontend/assets/css/styles.css
|
||
- frontend/index.html
|
||
- opcionalmente frontend/assets/js/main.js si hay que ajustar clases o hooks del render
|
||
|
||
## Constraints
|
||
- No tocar backend.
|
||
- No añadir librerÃas nuevas.
|
||
- No romper el comportamiento actual del panel.
|
||
- No hacer cambios destructivos.
|
||
- Mantener el trabajo centrado en grid, responsive y overflow.
|
||
|
||
## Validation
|
||
- El panel de servidores ocupa mejor el ancho disponible.
|
||
- Las tarjetas ya no se sienten excesivamente estrechas.
|
||
- Se corrigen problemas de compresión y desborde.
|
||
- El comportamiento responsive mejora en desktop, tablet y móvil.
|
||
|
||
## Change Budget
|
||
- Preferir menos de 3 archivos modificados.
|
||
- Preferir menos de 160 lÃneas cambiadas.
|
||
|
||
## Outcome
|
||
- `frontend/assets/css/styles.css` sustituye la rejilla fija de dos columnas por un `auto-fit` con `minmax`, permitiendo mejor reparto en desktop ancho y desktop medio.
|
||
- El mismo archivo endurece el panel con `min-width: 0`, `max-width: 100%`, `overflow: hidden` y subrejillas flexibles para quick facts y resumen.
|
||
- No fue necesario tocar `frontend/index.html` ni `frontend/assets/js/main.js`.
|
||
|
||
## Validation Result
|
||
- Revisado en codigo: el panel ahora define comportamiento especifico para desktop ancho, desktop medio, tablet y movil mediante breakpoints en `1120px`, `760px` y el ajuste movil existente.
|
||
- Revisado en diff: la task queda limitada a `frontend/assets/css/styles.css` y al archivo de task.
|
||
- Limitacion: no se ejecuto una comprobacion visual automatizada del navegador en esta tarea.
|
||
|
||
## Decision Notes
|
||
- La hardening del panel se resolvio a nivel de grid y overflow sin volver a rediseñar las tarjetas ni tocar la logica de render ya ajustada en la task anterior.
|