Styling issue with paragraphs

I just found that the following css classes which have been added to Claro theme in Drupal 10.2 are causing the alignment issue next to the Add button:

td > .form-item > .claro-autocomplete,
td > .form-item > .claro-autocomplete > .form-element,
td > .ajax-new-content > .form-item > .claro-autocomplete,
td > .ajax-new-content > .form-item > .claro-autocomplete > .form-element {

Still trying to find out why the "Order" is showing in the header.

The "Order"

ravi kant → made their first commit to this issue’s fork.

Might be something Paragraphs needs to look into it to fix it directly in the module

I have created a MR. I have this is right solution.

This issue is occurring due to the change in DOM structure of components rendering. Before Drupal 10.2 the class appearing was form-actions but after upgrade it is change to field-actions due to this the style is not being added to the field elements. If class is changed to form-actions the issue resolved.

Hi @saschaeggi, resolved the issue of paragraph styling and the Order label can be hide by click on Show row weights/Hide row weights. Attaching screenshot for reference. Please review the MR#357.

Thanks @Tirupati_Singh the styling is good for the placeholder but the "Order" title is still showing even with "Hide row weights", it's there by default. Are you testing it with Drupal 10.2.1?

@mahde, I've tested with Drupal 10.2.0.

Hmmm that's weird, not sure why it's not working fine at my end.
When I remove the following update in theme.inc then it works fine:
https://git.drupalcode.org/project/drupal/-/commit/be46dafb302ad16eeab76...

@Tirupati_Singh - I just noticed why it works with you. Would you please remove the default paragraph for the nested paragraph from "Manage form display" to be "None". The "Order" label will show when there is no paragraph is added in the nested paragraph field.

@mahde I relay appreciate task of @Tirupati_Singh
But @mahde, Did you check my changes?

@mahde, I removed Default paragraph type to None the Order label is visible.

@ravi kant - I have tried your solution but unfortunately nothing got fixed.

I have tested the changes proposed in Merge Request #357 and can confirm that they successfully resolve the styling issues.

The patch in MR#357 provides a viable solution to the issue.

Based on these findings, I recommend that the status of this issue be updated to "Reviewed & Tested by the Community".

@tguerineau - Would you please remove the first paragraph value in the nested paragraph then you are going to see the "Order" title showing in the header. I think we still need to fix this part.

I've left some code suggestions

@saschaeggi, I've changed the css property as per reviewed. Please review.

The misalignment seems to be fixed, I've pushed a change so we also address it for legacy paragraphs.

Order showing up is something I can't reproduce in either 10.2 or 10.2.1

So this needs a review of someones who has the Order showing up

The Order will show when the first Paragraph reference field has Allowed number of values "1" also the Show/Hide row weights link is not showing at all as shows in the screenshot below:

The other scenario is with the nested paragraph field when there is no paragraph is added as show below:

There are need to resolve like #24 said.

Also adding some points which i think that also need to be resolved.

1. Drag and drop option should not be visible if only one Paragraphs item
2. When you click show row weights, Weights dropdown shows in Paragraphs item it should be comes under the order section

Moving the to NW.

@djsagar, I've checked your mentioned points and came to know that drag and drop will be visible even if there's one paragraph item present as it's drupal default behaviour..
And for the Hide/Show row weights - Order section styling issue issue, it is similar to https://www.drupal.org/project/gin/issues/3348101 🐛 Paragraphs stick out from the edge Needs work issue.

Changing the status to Needs Review.

@Tirupati_Singh Drag & drop show when only single it not good for user interface. it should only show when there is more than one items.

I've tested MR- MR !357 mergeable on the Drupal- 10.2 version. The patch was applied successfully and looks good to me.
Testing Results:
I was able to reproduce the issue & after applying the patch the text alignment issue is fixed but the "Order" issue is still not fixed. Attaching before & after results here-

Changing the status to needs work as #25 has some valid points.

The order label issue is occurring due to the changes on Drupal 10 web/core/includes/theme.inc in template_preprocess_field_multiple_value_form(&$variables) {}. Created patch for the issue and on applying patch issue resolved. Attaching the screenshot for reference.

@Tirupati_Singh, I've applied the shared patch- paragraph-order-label.patch on Drupal version- 10.2, The patch was applied successfully.
Testing Results:
After applying the patch, the Order label issue was not fixed for me, The order labels are showing for all the fields after applying the patch without clicking on the 'Show row weights'. Attached After after-patch results for reference.

@Sandeep_k, I've setup fresh Drupal 10.2.2 and applied the paragraph-order-label.patch and the patch applied successfully. After the patch applied the Order label is not showing on the paragraph section. It is only showing when Show/Hide row weights is selected. Have you cleared the cache after applying the patch? Attaching the before and after patch applied screenshot for your reference.

Can someone else confirm whether the patch is working or not?

I have installed a fresh Drupal 10.2.3 with Paragraphs 8.x-1.17 and Gin 8.x-3.0-rc9.
I have attached my findings before and after applying paragraph-order-label.patch for 3 cases:

1. no paragraphs added,
2. paragraph added, weights hidden,
3. paragraph added, weights shown.

I am having another error in the styles, if a paragraph inside text format and the text format has many options to be used, it does not respect the layout-region-node-secondary

This issue is raised for Gin theme 8.x-3.0-rc8 and Paragraphs module 8.x-1.16.
But the issue gets resolved on the latest version(Gin theme 8.x-3.0-rc10 and Paragraphs module 8.x-1.17.) of both of them,both the previous version and the latest version are compatible with D9 and D10.
Also the concern raised by cacrody@gmail.com seems to be an issue of CKEditor itself, I've found the same from the issue queue of Drupal. You can keep an eye on this:
https://www.drupal.org/project/drupal/issues/3332416 🐛 CKEditor 5 toolbar items of multi-value field (typically Paragraphs) overflowing on narrow viewports and overlapping with node form's sidebar on wide viewports Active

For the time being I was able to fix the issues of paragraph width and order label with these 2 patches.
Hope it will help someone.

"patches" : { 
"drupal/gin" : { "Fix width of the component" : "https://www.drupal.org/files/issues/2024-04-09/Paragraphs-stick-out-from-the-edge-3348101-54_0.patch" },
"drupal/core" : { "Fix order label" : "https://www.drupal.org/files/issues/2024-01-25/paragraph-order-label_0.patch"
 } },

I've applied the shared patch, #31 paragraph-order-label.patch, on Drupal core 10.2.6 with custom theme that is using Olivero as base theme.
The patch was applied successfully and I can confirm the the Order label is gone. Thank you!