From 6c9b1d2fb390cb26ef05eaadb8e90e9e03a1864b Mon Sep 17 00:00:00 2001 From: dev Date: Sun, 4 Oct 2026 04:02:24 +0200 Subject: [PATCH] Fix board alignment when opening room chat --- deploy/server-status.md | 4 +++- docs/design-system.md | 2 ++ src/app.css | 48 ++++++++++++++++++++++++++++++----------- 3 files changed, 41 insertions(+), 13 deletions(-) diff --git a/deploy/server-status.md b/deploy/server-status.md index 419497f..6bd9e24 100644 --- a/deploy/server-status.md +++ b/deploy/server-status.md @@ -1,6 +1,6 @@ # Servidor de Juegoland -Versión 20261004-10. Web, API y WebSockets en mesa-game, 0.0.0.0:3000. +Versión 20261004-11. Web, API y WebSockets en mesa-game, 0.0.0.0:3000. El proxy Nginx existente de la red apunta a http://192.168.18.155:3000. Nginx y el antiguo servicio mesa-web están deshabilitados en la VM. @@ -14,4 +14,6 @@ Damas mantiene la ficha seleccionada durante capturas encadenadas y permite reco La interfaz consume `src/tokens.css`: tipografía proporcional de 16 a 18 px, espaciados, radios, sombras y colores de claro/oscuro y de las tres paletas. Los estilos globales se concentran en `src/app.css`; la geometría de los tableros permanece en sus componentes. `npm run design:check` se ejecuta durante el despliegue. Se revisaron catálogo, perfil, menús, invitaciones, avatar y salas en el navegador integrado, con anchos de 390, 565, 1440 y 3818 px. Los nombres y datos de partidas comparten escala en catálogo, perfil y panel lateral; la navegación inferior se ajustó a su altura real. +El chat aprovecha primero el margen derecho libre. A 1907×955, los cinco juegos conservan exactamente la posición y tamaño del tablero al abrirlo; en parchís y oca también se conserva el ancho de los controles. Se retiró la regla que convertía el tablero en una columna elástica y estrechaba los controles a 180 px. Se verificaron además 390×844, 1024×900, 1440×900, 3818×1886 y 932×430, sin desbordamiento horizontal. En pantalla horizontal de poca altura, tablero y acciones permanecen en columnas; el apilado del parchís se reserva a tabletas con altura suficiente. + PostgreSQL permanece en loopback, con base y rol dedicados. Credenciales y datos existentes se conservan. APT y npm operan por IPv4. Copias diarias activas a las 03:15 Europe/Madrid. diff --git a/docs/design-system.md b/docs/design-system.md index 9814e39..4ccd7f4 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -14,6 +14,8 @@ Los espaciados siguen una base de 4 px: 4, 8, 12, 16, 20, 24, 32, 40, 48 y 64. H El catálogo alinea título, descripción, datos y acción dentro de cada tarjeta. Las partidas pendientes y las salas comparten tamaños de nombre y metadatos. El texto de lectura se limita a 70 caracteres de ancho. En una sala, el tablero ocupa el espacio disponible y los controles y el chat mantienen una escala de interfaz propia. +El tablero y sus controles forman un conjunto compacto centrado. Al abrir el chat, el panel utiliza primero el margen libre de la derecha: si cabe, conserva las mismas coordenadas y dimensiones del tablero y los controles. Cuando falta espacio, el conjunto se desplaza solo lo necesario y el tablero reduce su tamaño si hace falta. En tabletas, el parchís coloca los controles debajo; en móvil, el chat se superpone y se cierra con su botón. El cálculo usa las dimensiones completas del área de juego, sin estrechar el contenedor ni convertir la columna del tablero en una franja elástica. + ```text Escritorio Móvil menú | contenido alineado cabecera diff --git a/src/app.css b/src/app.css index bac42d9..74e842d 100644 --- a/src/app.css +++ b/src/app.css @@ -2724,11 +2724,11 @@ textarea::placeholder { padding: var(--space-half) var(--space-1); } .match-room .room-layout { + --panel-reserve: 0px; flex: 1; min-height: 0; display: block; position: relative; - transition: padding-right var(--duration-normal) var(--ease-ui); } .match-room .play-area { height: 100%; @@ -2932,14 +2932,10 @@ textarea::placeholder { } @media (min-width: 850px) { .match-room .room-layout:has(.room-panel:popover-open) { - padding-right: calc(var(--size-popover) + var(--space-8)); - } - .match-room .room-layout:has(.room-panel:popover-open) .parchis-board { - grid-template-columns: minmax(0, 1fr) 180px; - gap: var(--space-3); + --panel-reserve: calc(var(--size-popover) + var(--space-8)); } } -@media (min-width: 850px) and (max-width: 1199px) { +@media (min-width: 850px) and (max-width: 1199px) and (min-height: 521px) { .match-room .room-layout:has(.room-panel:popover-open) .parchis-controls { width: 100%; } @@ -3622,7 +3618,17 @@ form textarea { --table-gap: clamp(16px, 2cqmin, 32px); --board-size: min( 100cqh, - calc(100cqw - var(--control-width) - var(--table-gap)) + calc( + 100cqw - var(--control-width) - var(--table-gap) - var(--panel-reserve) + ) + ); + --table-width: calc( + var(--board-size) + var(--control-width) + var(--table-gap) + ); + /* Use the right gutter first; move the table only when the panel would overlap it. */ + --panel-intrusion: max( + 0px, + calc(2 * var(--panel-reserve) - (100cqw - var(--table-width))) ); display: grid; flex: 1; @@ -3631,6 +3637,7 @@ form textarea { grid-template-rows: minmax(0, 1fr); gap: var(--table-gap); justify-content: center; + padding-right: var(--panel-intrusion); } .match-room .board-surface { align-self: center; @@ -3848,7 +3855,19 @@ form textarea { box-shadow: 0 0 0 2px var(--player-solid); } .match-room .board-container { - width: min(100cqw, calc(100cqh - 34px), 1100px); + --board-size: min( + calc(100cqw - var(--panel-reserve)), + calc(100cqh - 34px), + 1100px + ); + width: var(--board-size); + margin-left: max( + 0px, + min( + calc((100cqw - var(--board-size)) / 2), + calc(100cqw - var(--panel-reserve) - var(--board-size)) + ) + ); } .table-game + .board-note { display: none; @@ -3865,10 +3884,14 @@ form textarea { color: var(--secondary); font-size: var(--type-secondary); } -@media (min-width: 850px) and (max-width: 1199px) { +@media (min-width: 850px) and (max-width: 1199px) and (min-height: 521px) { .match-room .room-layout:has(.room-panel:popover-open) .parchis-board { - --board-size: min(100cqw, calc(100cqh - 150px)); - grid-template-columns: minmax(0, 1fr); + --board-size: min( + calc(100cqw - var(--panel-reserve)), + calc(100cqh - 184px) + ); + --table-width: var(--board-size); + grid-template-columns: minmax(0, var(--board-size)); grid-template-rows: minmax(0, var(--board-size)) auto; align-content: center; } @@ -3887,6 +3910,7 @@ form textarea { .match-room .parchis-board, .match-room .table-game { --board-size: min(100cqw, calc(100cqh - 184px)); + --table-width: var(--board-size); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, var(--board-size)) auto; align-content: start;