Problem/Motivation

When editing a node and while using Claro admin theme Content/Behavior tabs tasks are hidden when scrolling down.

CommentFileSizeAuthor
#8 Screenshot from 2026-02-04 16-50-31.png261.91 KBpivica
#8 Screenshot from 2026-02-04 16-49-36.png231.78 KBpivica
#8 Screenshot from 2026-02-04 16-48-42.png168.98 KBpivica
#5 Screenshot_20251220_130549.png20.88 KBberdir

Issue fork paragraphs-3562282

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

pivica created an issue. See original summary.

pivica opened merge request !220

berdir’s picture

berdir
Primary language German
Location Switzerland
commented
Status: Active » Needs work
pivica’s picture

pivica commented
Status: Needs work » Needs review

Pushed new version. As discussed i change breakpoint to `min-width: 64rem` which is the same as in core top-bar.css. This will avoid displace.js api problems between 768px and 64rem because our paragraphs will sticky aftger 64rem.

berdir’s picture

berdir
Primary language German
Location Switzerland
commented
Status: Needs review » Needs work
StatusFileSize
new Screenshot_20251220_130549.png20.88 KB

This is primarily about the navigation module, not claro.

Testing with just core, this still works fine with toolbar, but when enabling navigation, it's unpredictable. It worked once for me but not sure why but usually it doesn't. The thing I noticed is that this variable isn't set?

I tested by installing paragraphs_demo and paragraphs_test and enabled the test behaviors on the text paragraph type.

berdir’s picture

berdir
Primary language German
Location Switzerland
commented

I think I see the problem, even when the mode is set to open initially and the tabs are visually, somehow the displace stuff isn't initialized. Opening and closing the navigation sidebar fixes that. I'm not sure who is responsible for calling that and if it somehow doesn't work because our element is initially not visible?

berdir’s picture

berdir
Primary language German
Location Switzerland
commented
Title: When using Claro admin theme Content/Behavior tab is hidden when scrolling » When using navigation top bar, the Content/Behavior tab is hidden when scrolling
pivica’s picture

pivica commented
Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new Screenshot from 2026-02-04 16-48-42.png168.98 KB
new Screenshot from 2026-02-04 16-49-36.png231.78 KB
new Screenshot from 2026-02-04 16-50-31.png261.91 KB

Updated the MR to make sticky tabs work on all screen sizes using a mobile-first approach.

The problem

On smaller screens (< 64rem), the --drupal-displace-offset-top CSS variable is sometimes not set or set to an incorrect value. For example, on a 768px screen, the offset might be calculated as 48px when it should be 0.

This is a limitation in Drupal core's displace.js API:

  1. The navigation top-bar uses position: fixed only on screens >= 64rem (defined in core/modules/navigation/css/base/media-queries.pcss.css as @custom-media --admin-toolbar-desktop (min-width: 1024px))
  2. On smaller screens, the top-bar is part of the normal document flow and doesn't actually displace content
  3. However, displace.js doesn't account for this responsive behavior - it still detects the toolbar element and calculates an offset based on its height, even though the element isn't fixed and doesn't displace anything

Solution

Use a mobile-first approach:

  • All screen sizes: Apply sticky positioning with top: 0 and flex-direction: row (for horizontal tab layout)
  • Screens >= 64rem: Override top to use var(--drupal-displace-offset-top, 0) where the value is reliable

This matches core's navigation breakpoint exactly, ensuring we only use the displace offset when the toolbar is actually fixed.

Here are screenshots of a new sticky behaviour for all screen sizes:

Mobile

Tablet

Desktop

berdir’s picture

berdir
Primary language German
Location Switzerland
commented
Title: When using navigation top bar, the Content/Behavior tab is hidden when scrolling » Support navigation top bar and improved mobile behavior for sticky content/behavior tabs

  • berdir committed 001a0457 on 8.x-1.x authored by pivica 
    feat: #3562282 Support navigation top bar and improved mobile behavior...
berdir’s picture

berdir
Primary language German
Location Switzerland
commented
Status: Needs review » Fixed

Merged, thanks.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.