By mherchel on
Change record status: 
Published (View all published change records)
Project: 
Drupal core
Introduced in branch: 
10.3.x
Introduced in version: 
10.3.0
Issue links: 
https://www.drupal.org/node/3438895
Description: 

The node preview container, which is fixed to the top of the page, now responds using the Drupal.displace() JavaScript method.

This is accomplished by using Drupal.displace()’s built in CSS custom properties. Note that explicit styles need to be defined when using right-to-left languages, as Drupal.displace() is not language-direction aware.

.node-preview-container {
  position: fixed;
  padding-inline-start: var(--drupal-displace-offset-left, 10px);
  padding-inline-end: var(--drupal-displace-offset-right, 10px);
}

[dir="rtl"] .node-preview-container {
  padding-inline-start: var(--drupal-displace-offset-right, 10px);
  padding-inline-end: var(--drupal-displace-offset-left, 10px);
}

It’s recommended that any custom themes that fix the node preview container apply similar fixes.

Impacts: 
Themers