From e57dc5574e6a99e4eb8f2d68731c472ecd3ac939 Mon Sep 17 00:00:00 2001
From: JoseSerpaCode <joseserpamedinaxd@gmail.com>
Date: Thu, 20 Aug 2026 10:36:30 -0500
Subject: [PATCH] =?UTF-8?q?fix(movil):=20la=20p=C3=A1gina=20se=20pod=C3=AD?=
 =?UTF-8?q?a=20empujar=20de=20lado=20y=20se=20quedaba=20as=C3=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`overflow: hidden` frena el dedo pero no al código, y Editor.js llama a un
`scrollIntoView()` por cada bloque que enfoca. `clip` no admite ninguna de las
dos formas.

Y el menú lateral de escritorio seguía renderizándose en móvil a `left: -240`,
sin forma de abrirlo desde que la barra inferior sustituyó a la hamburguesa:
peso muerto que ensanchaba la región desplazable.

La prueba intenta empujar la vista 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 y no de uno demasiado ancho.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 CHANGELOG.md                           |  7 +++++
 package-lock.json                      |  4 +--
 package.json                           |  2 +-
 src/components/layout/Sidebar.astro    |  9 +++++-
 src/styles/themes.css                  | 14 ++++++++++
 tests/e2e/movil/desbordamiento.spec.ts | 38 ++++++++++++++++++++++++++
 6 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac5d964..12cd735 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index b4babf2..7980346 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "forge-js",
-  "version": "1.26.1",
+  "version": "1.26.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "forge-js",
-      "version": "1.26.1",
+      "version": "1.26.2",
       "dependencies": {
         "@astrojs/check": "^0.9.10",
         "@astrojs/node": "^11.1.2",
diff --git a/package.json b/package.json
index 25f5b5f..5177990 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "forge-js",
   "type": "module",
-  "version": "1.26.1",
+  "version": "1.26.2",
   "engines": {
     "node": ">=22.12.0"
   },
diff --git a/src/components/layout/Sidebar.astro b/src/components/layout/Sidebar.astro
index 330d2eb..912b741 100644
--- a/src/components/layout/Sidebar.astro
+++ b/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">
diff --git a/src/styles/themes.css b/src/styles/themes.css
index 5599431..f923f9a 100644
--- a/src/styles/themes.css
+++ b/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;
+  }
 }
 
 
diff --git a/tests/e2e/movil/desbordamiento.spec.ts b/tests/e2e/movil/desbordamiento.spec.ts
index bbc3eb3..a09e87e 100644
--- a/tests/e2e/movil/desbordamiento.spec.ts
+++ b/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();
+});