From a7c4b45a038a7d13bf4fe1cb2dfc8c3486604329 Mon Sep 17 00:00:00 2001 From: JoseSerpaCode Date: Tue, 18 Aug 2026 09:27:45 -0500 Subject: [PATCH 1/6] feat(movil): la base de conocimiento deja de ser inutilizable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Era la pantalla más rota del producto. El árbol de páginas es un `w-64` con `m-4` —288 px fijos— así que en una pantalla de 360 dejaban 72 para el editor y, menos su propio padding, **ocho píxeles de área de escritura**. Ni el árbol, ni el editor, ni las dos páginas que los alojan tenían una sola utilidad responsive. El árbol pasa a ser un **cajón**: fuera de pantalla por defecto, superpuesto al abrirse en vez de empujar el contenido. En un móvil no se lee el índice y el texto a la vez, y el editor necesita el ancho entero. Se cierra pulsando fuera, con Escape y al elegir una página —lo siguiente es leerla, no seguir mirando la lista. El colapso que ya existía para escritorio no servía aquí: dejaba el árbol en 64 px, que siguen siendo un quinto de la pantalla ocupados por algo que solo se mira al cambiar de página. **Borrar una página estaba fuera del viewport y solo con el ratón encima**: `-right-12` la sacaba de la pantalla y `opacity-0 group-hover` la hacía inalcanzable en táctil, donde no hay hover. En un teléfono, esa función no existía. Ahora está dentro del flujo y visible; en escritorio se mantiene el comportamiento discreto. El panel de atajos se esconde en móvil: se abría solo con el ratón encima y lo que lista son **atajos de teclado**. Hacerlo pulsable sería ofrecer una ayuda que no ayuda. ## La causa real costó tres intentos Los dos primeros arreglos no movieron el número ni un píxel: seguía midiendo exactamente 25. Culpé al carril de la barra de Editor.js y al `shrink-0` del flex, y ninguna era la causa. Lo resolvió una **captura de pantalla**: el contenido estaba empujado fuera por la derecha, o sea que el cajón seguía ocupando su hueco pese al `fixed`. El motivo es que la cadena de clases terminaba en `relative`, y en Tailwind, dentro del mismo grupo de utilidades, gana la que aparece más abajo en la hoja. El `fixed` del principio no llegaba a aplicarse nunca. Dos horas de diagnóstico por leer números en vez de mirar la pantalla. Co-Authored-By: Claude Opus 5 --- src/components/notion/EditorClient.astro | 60 +++++++++++++-- src/components/notion/PageTree.astro | 79 ++++++++++++++++++- src/i18n/en/kb.ts | 3 + src/i18n/es/kb.ts | 3 + src/pages/w/[sys_tag]/p/[page_id].astro | 2 +- tests/e2e/movil/kb.spec.ts | 97 ++++++++++++++++++++++++ 6 files changed, 235 insertions(+), 9 deletions(-) create mode 100644 tests/e2e/movil/kb.spec.ts diff --git a/src/components/notion/EditorClient.astro b/src/components/notion/EditorClient.astro index fbf3505..83c4914 100644 --- a/src/components/notion/EditorClient.astro +++ b/src/components/notion/EditorClient.astro @@ -52,8 +52,10 @@ function formatDate(dateStr: string | undefined) { } --- -
-
+
+ {/* En móvil el contenido usa el ancho entero: 64 px de padding lateral sobre + 360 son casi un quinto de la pantalla. */} +
{parentTitle && ( @@ -69,10 +71,17 @@ function formatDate(dateStr: string | undefined) { + {/* + Borrar la página estaba **fuera de la pantalla y solo con el ratón + encima**: `-right-12` la sacaba del viewport en móvil, y `opacity-0 + group-hover` la hacía inalcanzable en táctil, donde no hay hover. + Dentro del flujo y siempre visible en móvil; en escritorio se mantiene + el comportamiento discreto de aparecer al acercarse. + */} {canEdit && ( - )} @@ -93,13 +102,21 @@ function formatDate(dateStr: string | undefined) { ) : null}
-
- -
+ {/* Tres columnas sobre 360 px dejan 90 px por columna: «OPEN SOURCE» se parte + en dos líneas y cada enlace debajo también. Dos columnas en móvil y tres a + partir de `sm`. */} +

{t('footer.opensource')}

    diff --git a/src/components/layout/TopBar.astro b/src/components/layout/TopBar.astro index 8978f19..d9aac27 100644 --- a/src/components/layout/TopBar.astro +++ b/src/components/layout/TopBar.astro @@ -28,19 +28,23 @@ const currentUrl = Astro.url.pathname; )}
    - + {/* La identidad del espacio también en móvil. Estaba en `hidden sm:flex` + porque la hamburguesa ya ocupaba esa esquina; al retirarla, el lado + izquierdo de la barra se quedaba vacío y no había forma de saber en + qué espacio estabas sin abrir la hoja «Más». */} {title && ( - @@ -137,7 +141,10 @@ const currentUrl = Astro.url.pathname; - +{/* 650 px fijos sobre una pantalla de 360: el modal se salía por los dos lados + y la columna de pestañas, a un tercio, dejaba «Documentación» cortada a + media palabra. */} +

    @@ -146,20 +153,25 @@ const currentUrl = Astro.url.pathname;

    -
    -
    -
    - - + {/* Los atajos de teclado no se enseñan en un teléfono. + + La pestaña listaba «⌘/Ctrl + K», «C» y «Esc» a quien no tiene ni una + de las tres teclas, y ocupaba un cuarto del menú del modal + prometiendo algo que ahí no existe. */} + - - + +
    -
    +
    @@ -181,15 +193,15 @@ const currentUrl = Astro.url.pathname;

    {t('about.shortcuts.desc') || 'Master Forge OS using these quick keyboard shortcuts.'}

    - Command Palette / Search + {t('about.sc.palette')}
    / - or + {t('about.sc.or')} ⌘/Ctrl + K
    - Create New Issue + {t('about.sc.new_issue')} C
    @@ -197,7 +209,7 @@ const currentUrl = Astro.url.pathname; ⌘/Ctrl + B
    - Close Modal / Palette + {t('about.sc.close')} Esc
    @@ -254,6 +266,7 @@ const currentUrl = Astro.url.pathname;