Problem/Motivation
When using the Cygnet theme without shadow DOM enabled, the Properties buttons are misplaced. They should appear horizontally in line with their section headings, but they are appearing below their headings.
Steps to reproduce
- Install a Drupal 9 site with standard install profile.
- Enable modules: patternkit_example and layout_builder.
- Enable CKEditor wysiwyg integration for Patternkit
- Go to /admin/config/user-interface/patternkit/json
- Un-tick Use the Shadow DOM
- Select cygnet in field Select the JSON Editor Theme/
- Save
- Configure a content type to use Layout Builder.
- Create a node of that content type, then go to its Layout tab.
- Add the block of type "[Patternkit] Example"
- Notice that the Properties button is not horizontally aligned with its headings.
Screenshot of problem:

Proposed resolution
Since the buttons are aligned correctly when using Cygnet with shadow DOM, investigate which styles seem to be missing when shadow DOM is disabled. If found, restore those styles to Cygnet when shadow DOM is disabled.
Goal for how Properties buttons should look:

Remaining tasks
None
Release notes snippet
Restored some missing core JSON Editor styles to Cygnet theme when shadow DOM is disabled.
| Comment | File | Size | Author |
|---|---|---|---|
| Screen Shot 2022-02-01 at 4.13.35 PM.png | 110.77 KB | krisahil | |
| Screen Shot 2022-02-01 at 4.10.31 PM.png | 103.01 KB | krisahil |
Issue fork patternkit-3264322
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:
Comments
Comment #3
krisahil commentedComment #4
mariohernandez commentedSuccessfully tested fix for misplaced buttons. Thank you, @krisahil
Comment #6
mariohernandez commentedComment #7
mariohernandez commentedComment #9
mariohernandez commented