Misalignment of multiple form action items in Claro

Created on 28 August 2023, over 1 year ago
Updated 29 August 2023, over 1 year ago

Problem/Motivation

When editing an entity with the possibility to reference different types, a dropdown is often showed on the left of the add button.
Example: adding a different paragraph type to the form.

The dropdown has additional margin on the top and bottom:

Additionally the dropdown sticks to the button because there is no gap defined:

Steps to reproduce

  • Add paragraphs module
  • Define a few paragraph types
  • Add a paragraph field to the basic page bundle with unlimited cardinality which can reference any paragraph type
  • Add a basic page and add a

paragraph type

Proposed resolution

  • Action buttons and form items share the same margin
  • Text in the form actions container does respect the with of a space (i.e. ' to Paragraphs')
  • The items are aligned to the containers bottom so that labels above a form item does not break the visual alignment of the actions

Remaining tasks

Form action items and buttons share the same margins

Release notes snippet

🐛 Bug report
Status

Closed: duplicate

Version

10.1

Component
Claro 

Last updated about 13 hours ago

Created by

🇧🇪Belgium thierry.beeckmans

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024