Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#5,313 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Leggi apps/www/src/registry/examples/huge-document-demo.tsx intorno alla riga 992, dove la griglia dei pannelli imposta una larghezza minima della colonna di 360 px. Controlla come si comporta questo layout sotto i 384 px e modificalo in modo che i pannelli rientrino nella colonna del contenuto. Riproduci il problema a 360 px in Chromium; il lavoro è completo quando la pagina rientra nello schermo e uno scorrimento laterale non la sposta.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
16.6k
Fork
993
Merge medio
20h 1m
PR unite (30g)
61

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di udecode/plate

Tutte le issue di udecode/plate

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.