Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Beta]: On a 360 px wide phone screen, the Huge Document docs page is 25 px wider than the screen and pans sideways

Abierto Apto para principiantes
  • ¿Algo no está bien?
#5,313 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Lee apps/www/src/registry/examples/huge-document-demo.tsx alrededor de la línea 992, donde la cuadrícula de paneles establece un ancho mínimo de columna de 360 px. Comprueba cómo se comporta ese diseño por debajo de 384 px y ajústalo para que los paneles quepan en la columna de contenido. Reproduce el problema a 360 px en Chromium; el trabajo estará terminado cuando la página quepa en la pantalla y un deslizamiento lateral no la desplace.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Testing lane

  • Repository: udecode/plate
  • Branch: next
  • Release channel: Beta
  • Exact commit/package version: NOT_ENOUGH_INFO

Summary

On https://beta.platejs.org/docs/examples/huge-document, on a screen narrower than 384 px, the page is wider than the screen and pans sideways. At 360 px, a common Android width, the page is 385 px wide. The demo's Plate and Upstream Slate panels keep a 360 px minimum width inside a 312 px content column. https://platejs.org/docs/examples/huge-document does the same.

Reproduction

Sin found this by hand in Chrome on an Android phone on 2026-10-23 (Beijing time): the page scrolled sideways and was hard to scroll. The element that widened the page was not found then.

Repro 1: 360 px phone emulation, Chromium

An agent recorded this on the live Beta in headless Chromium 149 (Playwright) on 2026-10-24, with phone emulation at 360 x 800, touch input and a device scale of 3.

  1. Open https://beta.platejs.org/docs/examples/huge-document.
  2. Swipe up on the page text until the Plate panel shows.
  3. Swipe left on the page text above the panel.

Result: before the swipe, the Plate panel spans 24 to 384 px on a 360 px screen, so its right border is off the screen. The swipe pans the whole page 25 px, and the panel then spans -1 to 359 px, with the page's left margin gone.

Repro 2: widths

An agent measured the page on Beta and platejs.org on 2026-10-24 in headless Chromium 149 with phone emulation and in headless WebKit 26.5. There is no recording. Beta and platejs.org gave the same numbers.

Screen width Page width, Chromium Page width, WebKit Panel grid column Panel
360 385 384 312 360
375 385 384 327 360
390 390 390 342 360
400 400 400 352 360
412 412 412 364 364

At 390 and 400 px the panel still extends past its grid column into the page's right padding, but the page does not pan.

Expected

The page fits the screen. The panels shrink to the content column, and a sideways swipe does not move the page.

Actual

On screens narrower than 384 px, the panels stick out past the screen's right edge, and the page pans sideways by the difference.

Environment

  • Exact next commit/Beta package version: NOT_ENOUGH_INFO. The page does not show its build.
  • Repro 1: Chromium 149.0.7827.55 (Playwright, headless) with phone emulation, on macOS, 2026-10-24.
  • Repro 2: Chromium 149.0.7827.55 with phone emulation and WebKit 26.5 (Playwright, headless) on macOS, 2026-10-24.
  • Sin's report: Chrome on an Android phone, 2026-10-23.
  • Not tried on an iPhone, and not tried again on a real phone.

Caveat

On next c4067faca8, apps/www/src/registry/examples/huge-document-demo.tsx:992 lays out the panels with gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', so a column is never narrower than 360 px. main has the same line, which is why platejs.org pans the same way. A minimum such as minmax(min(360px, 100%), 1fr) would let the column shrink. Nobody has tried it.

Each panel is also its own scroll box, 560 px tall, so a vertical swipe that starts inside a panel scrolls the panel rather than the page. platejs.org has the same layout. This may be part of what Sin called hard to scroll. This issue does not count it as a bug.

Evidence

  • Repro 1: the agent's recording, 0:20, with an English step panel on the right. The sideways swipe is at 0:06, and the result is at 0:11. The dark box at the bottom is drawn by the test script and shows the screen width, the page width, the pan and the panel's edges.
Repro 1 — Chromium 149 phone emulation (360 x 800), /docs/examples/huge-document

https://github.com/user-attachments/assets/11effcc2-9f77-40d3-b231-d389149f1c3d

Lenguaje dominante
TypeScript
Estrellas
16.6k
Forks
993
Merge medio
20 h 2 min
PR fusionados (30 d)
62

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de udecode/plate

Todos los issues de udecode/plate

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.