Float positions Field Group Settings icon incorrectly with Gin theme

Created on 27 November 2023, 10 months ago
Updated 26 April 2024, 5 months ago

Problem/Motivation

Because this module places the Settings icon using a float, the icon is placed on top of a Paragraph, but can't be selected because it's outside the document flow. This happens when using the Gin theme.

The attached screenshots show the issue. In Before.png, the patch has not been installed and the second Field Group Settings icon is placed over the paragraph. In After.png, the patch has been installed the second Field Group Settings icon is placed above the paragraph, which makes it consistent with the first Field Group Settings icon.

Steps to reproduce

  1. Install and enable the Gin theme and Paragraphs
  2. Set up a Paragraph type and make it accessible to a content type
  3. On the content type, add a paragraph to a node
  4. The Field Group Settings icon will overlap the paragraph. If you try to click on it to select it, you'll click on/select the paragraph instead

Proposed resolution

I'll attach a patch that:

  • Switches the float to flex and uses flex to position the icon
  • Sets the cursor for the Field Group Settings button to pointer
  • Changes the Field Group Settings panel's display property to block rather than inherit

Remaining tasks

None.

User interface changes

UI changes in Gin should be minimal. However, the patch I'm submitting is untested in Claro and other themes, so there may be more drastic UI changes there.

API changes

None.

Data model changes

None.

πŸ› Bug report
Status

Fixed

Version

4.0

Component

User interface

Created by

πŸ‡ΊπŸ‡ΈUnited States jsutta United States

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

Comments & Activities

Production build 0.71.5 2024