The plus icon for .layout-builder__link--add is set to be top left, which means when the line height / font size of a theme is bigger than the icon it becomes offset - see below for how this looks in Umami.

core/modules/layout_builder/css/layout-builder.css and core/themes/stable/css/layout_builder/layout-builder.css should use center left instead of top left.

Before:
Add links
After:
Add links

CommentFileSizeAuthor
#3 interdiff_2-3.txt1.52 KBshaal
#3 layout-builder-plus-icon-vertically-centered-3050225-3.patch1.59 KBshaal
#2 3050225-2--layout-builder-add-link.patch1.26 KBsmaz
add-links-after.png9.01 KBsmaz
add-links-before.png7.7 KBsmaz
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

smaz created an issue. See original summary.

smaz’s picture

smaz
Primary language English
Location England, UK
CreditAttribution: smaz at Five Mile Media commented
Status: Needs work » Needs review
FileSize
3050225-2--layout-builder-add-link.patch1.26 KB

Patch attached.

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer and at Palantir.net commented
Version: 8.8.x-dev » 8.7.x-dev
Category: Feature request » Bug report
Issue tags: +Layout Builder frontend issue, +Out of the Box Initiative
FileSize
layout-builder-plus-icon-vertically-centered-3050225-3.patch1.59 KB
interdiff_2-3.txt1.52 KB

Changed the units of the Plus icon size (and padding) to em, so it can always match the font-size of the text next to it.

kjay’s picture

kjay CreditAttribution: kjay commented
Status: Needs review » Reviewed & tested by the community

This patch works as described. The plus icon aligns vertically centered and resizes on text resize. Setting to RTBC.

thalles’s picture

thalles
Primary language Portuguese, Brazil
Location Teófilo Otoni - MG
CreditAttribution: thalles at CI&T commented

+1 RTBC
Works for me!
Visually more enjoyable!

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 3: layout-builder-plus-icon-vertically-centered-3050225-3.patch, failed testing. View results

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer and at Palantir.net commented
Status: Needs work » Reviewed & tested by the community

Test failed randomly, switching it back to RTBC.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Version: 8.7.x-dev » 8.8.x-dev
Status: Reviewed & tested by the community » Fixed

Looks like a nice improvement! I think we should make this bug fix to Stable as well. Because of that, I'm only committing this for 8.8.x.

Committed f8f83d5 and pushed to 8.8.x. Thanks!

  • lauriii committed f8f83d5 on 8.8.x 
    Issue #3050225 by smaz, shaal, kjay: Layout builder link add: Set...

Status: Fixed » Closed (fixed)

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