[6.x]: Control panel: layout shift and nested scrollbars

Chiusa
  • Qualcosa non va?
#20,011 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
css, php
Ambito
accessibility, frontend

Direzione di ricerca

Start by comparing the control panel layout styles in Craft 6 with the body width behavior described for Craft 5, then inspect the nav, .cp-details pane, and details panel body scrollbar rules. Reproduce the page and pane shifts on a system with non-overlay scrollbars, including a short entry edit window. Done when the selected scrollbar behavior prevents the reported shifts and makes the nested scroll regions usable; the issue leaves the choice between two fixes open.

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

Descrizione

bug repo:cms
What happened?
Description

Two scrollbar issues in the control panel, with two possible fixes. Related: #20009

Now Fix 1 Fix 2
Image Image Image
Layout shift

This affects browsers where scrollbars take up space in the layout (Windows, Linux, and macOS with "Show scroll bars: Always"). With overlay scrollbars, the default on macOS and mobile, nothing shifts.

The page content moves sideways by the width of the scrollbar (about 15px) when the page scrollbar appears or disappears, for example when switching tabs on an entry edit page. Craft 5 has body { width: 100vw }, Craft 6 has 100%.

The scrolling panel body inside the details pane doesn't have a scrollbar-gutter: stable to stabilize it (unlike the nav and the .cp-details details pane itself ).

In the recording below both shifts (pane and page) are demonstrated.

https://github.com/user-attachments/assets/c0e342f6-5377-4482-a7dd-be877163a57d

Nested scroll regions

With non-overlay scrollbars, a short window on an entry edit page can show three scrollbars at once: the page, the nav and the details panel. It's hard to tell which one the wheel or the arrow keys will scroll. Mostly a usability problem, but it's worse for keyboard and magnifier users.

Other than the possible usability concerns it does look a bit noisy and it was even mentioned on CraftQuest's latest video where the new UI was demonstrated.

Fix 1
  • body { width: 100vw }, with an inline-end guard the width of the scrollbar so nothing ends up under it
  • thin inner scrollbars whose thumb keeps 3:1 contrast (the stock one is about 1.7:1), plus, optionaly, overscroll-behavior: contain
  • scrollbar-gutter: stable on the details panel body

https://github.com/user-attachments/assets/42ef7e6f-53a5-452f-bbb2-b4b2b8077464

Fix 2

Fix 1, plus hiding the inner scrollbars (nav, details panel) until hover or focus, with a fade at the edge where there is more to scroll. The scrollbar space stays reserved, so nothing shifts when it appears. The page scrollbar stays visible. This is the cleaner option from a purely visual standpoint.

Downsides: no scrollbar at rest to show position or to grab. The nav on Craft 5 though did indeed hide its scrollbar.

https://github.com/user-attachments/assets/49160c0b-3958-4877-be8d-0bffadfc8bb5

Craft CMS version

6.x-dev (4d5bbd29)

PHP version

No response

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions
Lingua principale
PHP
Stelle
3.6k
Fork
712
Merge medio
13h 8m
PR unite (30g)
366

Preparare l'ambiente

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 craftcms/cms

Tutte le issue di craftcms/cms

Issue simili

Altre issue su PHP

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.