fix(móvil): la página se podía empujar de lado y se quedaba así

CHANGELOG.md

@@ -6,6 +6,13 @@ El formato está basado en [Keep a Changelog](https://keepachangelog.com/es-ES/1
 
 > Las entradas entre la 0.6.0 y la 1.4.0 se reconstruyeron a posteriori a partir del historial de git, agrupadas por los saltos de versión que realmente ocurrieron en `package.json`. La 1.1.0 nunca existió: se pasó directamente de la 1.0.0 a la 1.2.0.
 
+## [1.26.2] - 2026-08-20
+
+### Fixed
+
+- **La página se podía empujar de lado, y se quedaba así.** `overflow: hidden` frena el dedo pero **no** al código, y Editor.js llama a un `scrollIntoView()` por cada bloque que enfoca. El contenedor se corría en horizontal y ahí se quedaba: texto cortado por la izquierda y la barra inferior arrastrada con él. Ahora el armazón lleva `overflow-x: clip`, que no admite desplazamiento de ninguna de las dos formas.
+- **El menú lateral de escritorio seguía en el DOM en móvil**, con `-translate-x-full`: 240 px de contenido plantados en `left: -240`. Desde que la barra inferior sustituyó a la hamburguesa ya no había forma de abrirlo, así que era peso muerto que además ensanchaba la región desplazable del documento. Ahora no se renderiza por debajo de `md`.
+
 ## [1.26.1] - 2026-08-20
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "forge-js",
   "type": "module",
-  "version": "1.26.1",
+  "version": "1.26.2",
   "engines": {
     "node": ">=22.12.0"
   },

src/components/layout/Sidebar.astro

@@ -55,7 +55,14 @@ if (workspaceId && user?.is_sysadmin !== 1) {
 const isOwner = userRole === 'owner' || userRole === 'sysadmin';
 ---
 
-<aside id="app-sidebar" class="fixed md:static inset-y-0 left-0 z-50 w-60 bg-forge-panel border-r border-forge-border flex flex-col h-full shrink-0 transition-transform duration-300 ease-in-out -translate-x-full md:translate-x-0">
+{/* Fuera del DOM en móvil, no solo fuera de la pantalla.
+
+    Seguía renderizándose con `-translate-x-full`, o sea 240 px de contenido
+    plantados en `left: -240`. Desde que la barra inferior sustituyó a la
+    hamburguesa ya no hay forma de abrirlo, así que era peso muerto que además
+    ensancha la región desplazable del documento: el navegador deja llevar la
+    vista hasta él, y la página aparece corrida con el texto cortado. */}
+<aside id="app-sidebar" class="hidden md:flex fixed md:static inset-y-0 left-0 z-50 w-60 bg-forge-panel border-r border-forge-border flex-col h-full shrink-0 transition-transform duration-300 ease-in-out -translate-x-full md:translate-x-0">
 
   <!-- Logo -->
   <div class="h-14 px-4 border-b border-forge-border flex items-center hover:bg-forge-bg transition-colors shrink-0">

src/styles/themes.css

@@ -139,6 +139,20 @@
       height: 100vh;
     }
   }
+
+  /* `clip` y no `hidden` en horizontal.
+
+     `overflow: hidden` impide arrastrar con el dedo pero **no** el
+     desplazamiento por código: un `scrollIntoView()` —y Editor.js llama a uno
+     por cada bloque que enfoca— corre el contenedor de lado igual, y ahí se
+     queda. Se veía como la página entera desplazada, con el texto cortado por
+     la izquierda y la barra inferior arrastrada con ella.
+
+     `clip` no admite desplazamiento de ninguna de las dos formas. Solo en
+     horizontal: en vertical hace falta que las cosas se puedan desplazar. */
+  body {
+    overflow-x: clip;
+  }
 }
 
 

tests/e2e/movil/desbordamiento.spec.ts

@@ -80,3 +80,41 @@ for (const { nombre, ruta } of pantallas) {
     expect(medidas.documento, `desborda por ${medidas.culpable}`).toBeLessThanOrEqual(medidas.ventana + 1);
   });
 }
+
+test('nada empuja la vista de lado, ni por código', async ({ page }) => {
+  await entrar(page);
+  const wsId = conContenido();
+
+  const db = getTestDb();
+  db.prepare('DELETE FROM pages WHERE workspace_id = ?').run(wsId);
+  const pid = crypto.randomUUID();
+  const yo = db.prepare("SELECT id FROM users WHERE username = 'jose'").get() as any;
+  db.prepare('INSERT INTO pages (id, workspace_id, title, content_json, created_by) VALUES (?,?,?,?,?)')
+    .run(pid, wsId, 'Proyecto 2', JSON.stringify({ blocks: [{ type: 'header', data: { text: 'Integrantes:', level: 1 } }] }), yo.id);
+
+  await page.goto(`/w/${ESPACIO}/p/${pid}`);
+  await page.waitForLoadState('networkidle');
+
+  /*
+   * `overflow: hidden` frena el dedo pero no al código: un `scrollIntoView()`
+   * —y Editor.js hace uno por cada bloque que enfoca— corre el contenedor de
+   * lado igual, y ahí se queda. Se veía como la página entera desplazada, con
+   * el texto cortado por la izquierda y la barra inferior arrastrada con ella.
+   *
+   * Se intenta a la fuerza, que es lo único que reproduce el fallo: mirar el
+   * ancho del documento no basta porque el desbordamiento venía de un elemento
+   * colocado en negativo, no de uno demasiado ancho.
+   */
+  const movido = await page.evaluate(() => {
+    const sitios = [document.documentElement, document.body];
+    for (const el of sitios) {
+      el.scrollLeft = 500;
+      if (el.scrollLeft !== 0) return `${el.tagName.toLowerCase()} se fue a ${el.scrollLeft}`;
+    }
+    return '';
+  });
+  expect(movido, 'la vista se puede empujar de lado').toBe('');
+
+  // Y el menú lateral de escritorio no se queda plantado fuera de la pantalla.
+  await expect(page.locator('#app-sidebar')).toBeHidden();
+});