Problem/Motivation

Row weight select item overlaps the media field in paragraph field

Steps to reproduce

  1. Add a paragraph type to article content type.
  2. Go and add/edit content in article content type.
  3. In the paragraph field, you will the row weight select list is overlapping the item in left.
  4. Attached screenshot for reference.

Before Patch

After patch


CommentFileSizeAuthor
#16 paragraphs-claro.png127.86 KBsheetal.pathak
#16 paragrphs-Olivero.png126.16 KBsheetal.pathak
#15 Paragraph Olivero.png33.42 KBakashdab
#15 Paragraph Claro.png35.45 KBakashdab
#11 Screenshot 2023-07-11 at 3.58.51 PM.png105.98 KBkeshavv
#11 Screenshot 2023-07-11 at 3.56.39 PM.png78.39 KBkeshavv
#11 Screenshot 2023-07-11 at 3.55.10 PM.png89.73 KBkeshavv
#5 Screenshot 2023-07-07 at 7.44.01 AM.png122.73 KBgauravvvv
Screenshot 2023-07-06 at 8.36.19 AM.png101.33 KBgauravvvv

Issue fork drupal-3372720

Command icon 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:

About issue forks

Comments

Gauravvvv created an issue. See original summary.

Gauravvvv opened merge request !4326

gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review

The spacing appears to be correct in RTL (right-to-left), but there is an issue specifically with LTR (left-to-right) text direction. I have submitted a merge request (MR) with the necessary fix. Please kindly review it.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Think after screenshots will be needed.

But also this reproducible in core? Seems like it could be a paragraphs problem.

gauravvvv’s picture

gauravvvv commented
Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new Screenshot 2023-07-07 at 7.44.01 AM.png122.73 KB

After patch

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Can the MR be updated for 11.x please.

Gauravvvv opened merge request !4351

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
smustgrave’s picture

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

Going to mark but 50/50 if this should be solved in paragraphs or not.

Thanks!

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs review

Doesn't the weight still overlap with the media field (at least based on the screenshot)?

keshavv’s picture

keshavv commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Screenshot 2023-07-11 at 3.55.10 PM.png89.73 KB
new Screenshot 2023-07-11 at 3.56.39 PM.png78.39 KB
new Screenshot 2023-07-11 at 3.58.51 PM.png105.98 KB

I have checked and confirmed that the issue is with the Claro Theme. There is no issue with Olivero Theme.
MR !4351 Works perfectly.

Here are the before-patch screenshots.
Claro Theme
Before patch

Olivero theme
Before patch

After patching in Claro theme.
After patch.

We can go with this MR.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs work

The change increases table column padding for use cases like field cardinality where it's not desired. Is there a way to reproduce this bug with just core? I'm not sure we should at ship the current solution in core because it regresses the UX in common use cases when paragraphs is not used.

keshavv’s picture

keshavv commented

I agree with your point, Otherwise, we need to write paragraph-specific CSS. Will try to replicate.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

akashdab’s picture

akashdab commented
Issue summary: View changes
StatusFileSize
new Paragraph Claro.png35.45 KB
new Paragraph Olivero.png33.42 KB

Cannot reproduce this issue in Drupal 11.x Claro, there seems to be some alignment issue to the weight selection dropdown when admin theme is set to Olivero.

Paragraph view for Claro:

Paragraph Claro

Paragraph view for Olivero:

Paragraph Olivero

I also found the steps to recreate the issue unclear, so,

Steps to reproduce

  1. Install Paragraph module form here.
  2. Enable and install Paragraphs and Paragraphs Type Permissions from Admin --> Extend
  3. Now go to Admin>Structure --> Paragraph types. Add a Paragraph type. Choose a label name. Save and Manage fields.
  4. Select create a new field --> File upload --> Give it a label and select Image type --> Save settings(to get the same paragraph structure with image input as suggested by OP)
  5. To add paragraph type to article content type, go to Structure --> Content types --> Select Manage field operation for Article --> Create a new field --> Select Paragraphs & Continue --> Add a label name, Continue --> Scroll down to Paragraph types, Select the paragraph type you created in Step 3 & save settings
  6. Now go to Admin --> Content --> Add content --> Article to add content in article content type.
sheetal.pathak’s picture

sheetal.pathak commented
StatusFileSize
new paragrphs-Olivero.png126.16 KB
new paragraphs-claro.png127.86 KB

Followed given steps not able to reproduce alignment issue related to row weight field.

Drupal Version 11.x-dev
Paragraphs module version- 8.x-1.18
Themes- Claro , Olivero
Steps to reproduce already mentioned in #15.

Steps followed
1. Created Paragraph Type, added fields to it.
2. Add a paragraph type to article content type.
3. Add/edit content in article content type.
4. Check for Olivero and Claro theme.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.