Paragraph with long label name gets cut off

Patch and results in screenshot of the changes.

Related link to this but this one issue to do with paragrap-top.
Linking it as it has to do with title or labelling text being truncated.

Hi @edyuenyw, I verified your patch and I can confirm that it fixes the issue mentioned in the ticket. But I don’t know why it’s showing test failure. Attaching before and after screenshots for reference.

Hi @nayana_mvr,
Thank you for verifying the patch. There was an issue relating the failed 9.5 test and was fixed a few weeks later https://www.drupal.org/project/replicate/issues/3350803 🐛 Error : Class "Drupal\layout_builder\Plugin\SectionStorage\OverridesSectionStorage" not found in Drupal\replicate\EventSubscriber\ReplicateLayoutBuilderSubscriber->onReplicateAfterSave() Fixed . This is now passed.

Thank you @edyuenyw for fixing, confirmed it is working on Version: 10.1.4

Thanks for the patch. Can confirm that it works with paragraphs 1.16 with core 10.2.

Asked for an internal review. It's a CSS only change, so not much to test but a merge request is still preferred now.

@Berdir I have created the !MR128 as per your comment with the changes in the patch #2 🐛 Paragraph with long label name gets cut off Closed: duplicate . No new code changes. Please check.

Please find the before and after screenshots in Drupal 10.4.x and Paragraphs version 8.x-1.x.

The main reason we are using that 150px is to get consistent grid layout when collapse mode is active. Here is a default look with "150px auto 1fr auto" rule:

And here is a look when we switch to "auto auto 1fr auto":

So this will not work.

It is unfortunate that this collapse rules also affect edit mode which is a problem described in this issue. We can not fix this easily because we are missing a good CSS class change that is identifying collapse and edit mode. We are doing something for this but only for div.paragraphs-description element - check `/paragraphs/templates/paragraphs-summary.html.twig` template where we have this

{% set classes = [
  'paragraphs-description',
  expanded ? 'paragraphs-expanded-description' : 'paragraphs-collapsed-description'
] %}

And expanded is injected in `template_preprocess_paragraphs_summary()` and there it is coming from `paragraphs/src/Plugin/Field/FieldWidget/ParagraphsWidget.php` which I guess it depends on the active form mode collapse or edit. And this is done only for summary element.

Maybe the best approach would be to move this expand logic to some parent form element which wraps all elements in this grid, add collapse/edit state class there and then refactor summary rules to use this new class and change label width to auto only for edit mode?

Also found this related issue: 🐛 Nested paragraphs title gets cut off Needs review , so this should probably be closed as a duplicate.

Yeah that one is a lot older that this one and it is also trying to do couple of additional improvements. Let's mark this one as duplicate.