comunidadhll/ai/tasks/done/TASK-040-full-width-page-shell-and-section-width-rebalance.md

TASK-040-full-width-page-shell-and-section-width-rebalance

Goal

Reorganizar el layout general de la landing para aprovechar mucho mejor el ancho de página disponible, separando el ancho útil de las distintas secciones y eliminando la sensación de página excesivamente estrecha.

Context

La UI actual ya funciona y muestra datos reales, pero la composición general está demasiado constreñida en ancho. Esto provoca mucho espacio muerto lateral, reduce el impacto visual del diseño y comprime en exceso el panel de servidores. La landing necesita una estructura de anchuras más flexible y más coherente con un formato panorámico de desktop.

Steps

1. Revisar la estructura general de contenedores de frontend/index.html.
2. Revisar el sistema de anchuras, max-width, paddings laterales y shells actuales en frontend/assets/css/styles.css.
3. Reorganizar la página para que no todas las secciones dependan del mismo ancho máximo.
4. Definir al menos una separación clara entre:
   • ancho del hero
   • ancho del tráiler
   • ancho del panel de servidores
5. Aumentar el ancho útil del bloque de servidores para aprovechar mejor desktop amplio.
6. Mantener el diseño responsive y sin romper móvil o tablet.
7. Preservar la identidad visual actual sin rediseñar completamente la página.

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/index.html
• frontend/assets/css/styles.css

Constraints

• No tocar backend.
• No añadir librerías nuevas.
• No romper el comportamiento actual del frontend.
• No hacer cambios destructivos.
• Mantener la landing coherente con el tono visual actual.

Validation

• La página ocupa mejor el ancho disponible en desktop.
• El panel de servidores gana anchura real.
• El hero y el tráiler mantienen buen equilibrio visual.
• La UI sigue funcionando correctamente en tablet y móvil.

Change Budget

• Preferir menos de 3 archivos modificados.
• Preferir menos de 180 líneas cambiadas.

Outcome

• frontend/assets/css/styles.css separa el ancho del hero, del bloque de trailer y del panel de servidores con shells independientes.
• El page-shell deja de imponer un unico ancho maximo a toda la landing y el panel de servidores gana mas ancho util en desktop.
• La mejora se mantuvo en CSS para no introducir cambios estructurales innecesarios en el HTML.

Validation Result

• Revisado en diff: el ajuste queda limitado a frontend/assets/css/styles.css y al propio archivo de task.
• Revisado en codigo: hero, trailer y panel de servidores usan anchuras maximas distintas y el layout movil conserva los resets responsive existentes.
• Limitacion: no se ejecuto una comprobacion visual automatizada del navegador en esta tarea.

Decision Notes

• La separacion de shells se resolvio con anchuras por seccion en lugar de crear nuevos wrappers HTML, para mantener la landing estable y reducir riesgo sobre el frontend actual.