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

[Beta]: Pagination example: the docs sidebar covers the page and toolbar at 1280 px and wider

Abierto
  • ¿Algo no está bien?
#5,254 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
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
68/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
accessibility, frontend

Línea de trabajo

Start with the pagination shell and sidebar styles at apps/www/src/app/(app)/examples/plite/plite-example-styles.css and apps/www/src/app/(app)/examples/plite/plite-examples-shell.tsx, then compare their layout with the Editable Voids example. Reproduce at 1280 px and check that clicks reach the page and toolbar controls while sidebar links remain usable. Done when the sidebar no longer overlays the paged view or toolbar at 1280 px and wider.

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

Descripción

bug target:beta

Testing lane

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

Summary

On /examples/plite/pagination, in windows 1280 px wide and wider, the examples sidebar on the left is transparent and sits on top of the paged view and its toolbar. Its links show over the left page, a click on the left page's margin opens the Editable Voids example, and toolbar controls under it cannot be clicked: Preset and Margins, and at 1280 px also Facing and Debug.

Reproduction

Repro 1: /examples/plite/pagination, Chromium
  1. Open https://beta.platejs.org/examples/plite/pagination in a 1280 x 860 window. The sidebar's example links, such as Checklists, Editable Voids and Images, show over the left page, and Back to docs overlaps the Facing and Debug switches in the toolbar. Move the mouse to the left margin of the left page, next to Second paragraph. The Editable Voids link highlights there.
  2. Click there.
  3. Press the browser Back button.
  4. Click the Preset select (A4) in the toolbar.
  5. For comparison, click the Rendering select.
  6. Click the Facing switch.

Step 2 opens the Editable Voids example. Steps 4 and 6 do nothing. Focus stays on the page body, and Facing stays on. Step 5 focuses the Rendering select.

The agent checked each toolbar control at 1000, 1280, 1512 and 1728 px wide:

  • At 1000 px every control can be clicked, and the examples navigation does not cover them.
  • At 1280 px and wider, the sidebar covers Preset and Margins.
  • At 1280 px it also covers Facing and Debug. From 1512 px those two switches move to the right end of the toolbar and can be clicked.

In Playwright WebKit the same controls were covered.

Expected

Clicks on the pages and the toolbar reach them, and the sidebar links do not cover the page. On the other Beta examples the same sidebar sits beside the content, as the Editable Voids page shows in the recording, and on this page at 1000 px every control works. natamox confirmed by hand that the page layout is broken.

Actual

The transparent sidebar covers the left side of the paged view and toolbar. Its links take clicks meant for the page, and some toolbar controls cannot be clicked.

Environment

  • Exact next commit/Beta package version: NOT_ENOUGH_INFO
  • An agent ran it on 2026-10-22 (PT) in headless Chromium 149.0.7827.55 and Playwright WebKit 26.5 (not Safari) on macOS, driven by Playwright with a real mouse and keyboard. The recording uses Chromium at 1280 x 860.
  • natamox confirmed it by hand on 2026-10-22 (PT). The browser of that retest was not recorded.
  • Not tried: Firefox, Safari itself, mobile.

Caveat

  • From a reading of the code on next at bb6147452c, not confirmed by a fix: the example's outer .editor-pagination-shell is position: fixed; inset: 84px 0 0; z-index: 1 (apps/www/src/app/(app)/examples/plite/plite-example-styles.css:877), so it spreads over the whole window below the header. It still renders inside the examples shell's main, next to the sidebar, which is sticky, z-30 and bg-transparent (apps/www/src/app/(app)/examples/plite/plite-examples-shell.tsx:93). The sidebar stacks higher, so its 288 px wide transparent area sits over the page, takes the clicks, and its links show through.
  • The same sidebar class is hidden below the lg breakpoint, which may be why 1000 px works. That is an inference and was not checked.
  • The same page also cuts off the right facing page on first load. That has a different cause and is #5255.

Evidence

  • Repro 1: headless Chromium recording, 45 seconds, with an English step panel on the right. An orange ring marks each click. The dark readout box at the bottom is drawn by the test script, not the page. It shows the page address, the top-most element under the mouse, keyboard focus, the Facing switch, and the page area's width, sideways scroll and zoom. From 0:01 the top-most element at the left page's margin is the sidebar link Editable Voids. The click at 0:04 opens /examples/plite/editable-voids, shown from 0:05 to 0:08 with the sidebar beside the content, and Back returns at 0:09. From 0:15 the Preset click lands on the sidebar's invisible area and focus stays on the page body. At 0:19 the Rendering select takes focus. From 0:22 the Facing click also lands on the sidebar, and Facing stays on. The panel's steps 7 and 8, from 0:25, belong to #5255.
Repro 1 — Chromium, /examples/plite/pagination

https://github.com/user-attachments/assets/31363431-331f-48de-8cab-b0bfc0278dd9

Related

Other Beta issues on the pagination pages from the same round of testing:

  • #5253: in Facing mode, clicks on the first left page land on the right page and drag-select selects nothing
  • #5255: with Facing on, the right page is cut off on first load
  • #5257: in Safari, text shifts when the caret moves and headings overlap the text during selection
  • #5258: typing lags with the default 990 stress pages
  • #5260: in Safari, Shift+Down stops extending after the first line
Lenguaje dominante
TypeScript
Estrellas
16.6k
Forks
993
Merge medio
20 h 21 min
PR fusionados (30 d)
60

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.