From e160cae485b894ede851161657a7058bc199f351 Mon Sep 17 00:00:00 2001 From: ErickHub192 Date: Sun, 16 Aug 2026 17:52:32 -0600 Subject: [PATCH 1/2] La Sala se puede usar desde el celular MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Estaba hecha para pantalla ancha: el chat a la izquierda y el preview a la derecha, los dos a la vez. En un telefono eso deja las dos cosas inservibles, y ya habia costado una demo (hubo que llevar la laptop en vez de enseñarlo en el celular). En pantallas de menos de 820px el chat pasa a ser una pestaña mas, junto a "La app" y "El back", y se ve una a la vez. Esa pestaña no existe en escritorio, donde el chat vive en su columna y no es una vista. La cabecera se queda siempre visible aunque el chat no lo este: vive dentro de el, y esconderlo se llevaba el nombre de la sala, el menu y el boton de crear. En vez de moverla en el JSX (que cambiaria el escritorio, donde esta bien), el chat se encoge a solo su cabecera cuando la pestaña activa es otra. Tambien: la barra de arriba baja de renglon en vez de salirse de pantalla, los paneles flotantes se ajustan al ancho disponible (median mas que un telefono), y las alturas usan `dvh` ademas de `vh`, porque `vh` ignora la barra del navegador del celular y cortaba justo la caja de escribir. El escritorio no cambia: todo vive dentro de la media query salvo la linea que esconde ahi la pestaña nueva. Co-Authored-By: Claude Opus 5 --- web/src/App.tsx | 19 +- web/src/i18n.tsx | 3 + web/src/styles.css | 3549 +++++++++++++++++++++++--------------------- 3 files changed, 1858 insertions(+), 1713 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index d4b1f23..24d45fb 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -222,7 +222,11 @@ function Sala({ roomId, name }: { roomId: string | null; name: string }) { /** Se incrementa cuando cambia un archivo, para que el mapa del back recargue. */ const [apiVersion, setApiVersion] = useState(0); /** Qué tab del escenario se ve. */ - const [tab, setTab] = useState<"app" | "back">("app"); + /** + * Qué se está viendo. "chat" solo existe en pantallas chicas, donde el chat + * no cabe al lado del preview y pasa a ser una vista más. + */ + const [tab, setTab] = useState<"chat" | "app" | "back">("app"); /** * El chat colapsado deja el preview a pantalla completa. * @@ -668,7 +672,9 @@ function Sala({ roomId, name }: { roomId: string | null; name: string }) { }, [roomId, histVersion]); return ( -
+ // `ver-*` es lo que el CSS usa en móvil para decidir qué se muestra. En + // escritorio se ignora: ahí el chat y el preview conviven en dos columnas. +
{/* Chat izquierda */}