Olivero: configure section icon focus breaking in firefox.

Steps to reproduce:

1. edit page by layout builder.
2. focus on configure section icon.

Adding chrome and Firefox screenshots for reference.

CommentFileSizeAuthor
#13 layout-builder-remove-link-focus.png581.98 KBakshayadhav
#12 3214138-after_patch.png106.94 KBabhijith s
#12 3214138-before_patch.png117.63 KBabhijith s
#7 Before Patch 3214138-6.png52.48 KBpallavisk
#7 After Patch 3214138-6.png51.45 KBpallavisk
#6 interdiff_3214138_4-6.txt641 bytesankithashetty
#6 3214138-6.patch430 bytesankithashetty
#4 3214138-4.patch517 bytesgauravvvv
#3 Edit_layout_for_Layout_Builder_Page_Test___Olivero.png294.45 KBmherchel
Screenshot 2021-05-15 at 14.41.58.png22.75 KBgauravvvv
Screenshot 2021-05-15 at 14.41.25.png32.5 KBgauravvvv

Comments

Gauravmahlawat created an issue. See original summary.

kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
commented

This issue is of Layout builder not because of Olivero theme.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: Olivero: configure section icon focus breaking in firefox » Layout Builder: Configure section icon focus too large in Firefox
Component: Olivero theme » layout_builder.module
Priority: Normal » Minor
Issue summary: View changes
Issue tags: +CSS
StatusFileSize
new Edit_layout_for_Layout_Builder_Page_Test___Olivero.png294.45 KB

Yeah, this issue is caused by Layout Builder's styles. When using text-indent, we should also be using overflow:hidden.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3214138-4.patch517 bytes

Thanks @mherchel, Patch attached for same. Please review.

gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
ankithashetty’s picture

ankithashetty
Location Karnataka, India
commented
StatusFileSize
new 3214138-6.patch430 bytes
new interdiff_3214138_4-6.txt641 bytes

Just fixed custom command failure error in #4, thanks!

pallavisk’s picture

pallavisk commented
StatusFileSize
new After Patch 3214138-6.png51.45 KB
new Before Patch 3214138-6.png52.48 KB

Verified and tested patch #6.
Patch applied successfully.

Testing Steps:
# Go to Appearance -> Set Olivero theme
# Go to Extend -> Enable Layout Builder module
# Go to Structure -> Article content type ->Manage Display -> Enable Layout options
# Create an article page by layout builder.
# Save it and focus on configure section icon to see the result.

Please refer attached screenshots.
Can be move to RTBC.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

aarti zikre’s picture

aarti zikre commented
Status: Needs review » Reviewed & tested by the community
quietone’s picture

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

@aarti zikre, when setting an issue to RTBC your reasons for doing show should be listed.

Setting back to NR. Does the patch apply to 9.5?

abhijith s’s picture

abhijith s commented
StatusFileSize
new 3214138-before_patch.png117.63 KB
new 3214138-after_patch.png106.94 KB

Applied patch #6 on 9.5.x and focus area is reduced in Firefox.

Before patch:
before

After patch:
after

There is some margin appeared at the bottom of close button.Is that okay?

akshayadhav’s picture

akshayadhav
he/him
Location Pune, India 🇮🇳
commented
Status: Needs review » Closed (cannot reproduce)
StatusFileSize
new layout-builder-remove-link-focus.png581.98 KB

Could not reproduce the issue. Did not require to apply the patch.
layout builder - remove link focus