Link field description squashes the field

I am looking into this issue.

I have addressed this issue and tested related pages to ensure there are no regressions.
Please review the changes and share any feedback.
Thanks!

Hi @sd9121, I followed the steps to reproduce the issue and can confirm that it still persists. When adding a link field, the URL field gets squished due to the description taking up too much horizontal space. This is also affecting the layout of fields for the link title and text.

I applied the MR provided as a patch, and it applied without any errors. After applying the patch, the URL field's description was moved below the URL, which resolves the design issue and prevents it from breaking the layout.

For reference, I’ve attached screenshots showing the issue before and after the fix.

However, in the latest version of Drupal 11, this issue doesn’t occur, since the CSS rule td > .form-item { display: flex; } has been removed from tables.css. In Drupal 11, the .form-item now renders as a block element, which resolves the issue naturally.

Moving the status to RTBC as the changes are working fine and will fix the issue for older versions as well.

Thanks!

IS is incomplete

Noticed the same after updating from core 10.4 to 11.2.
This is a regression from 🐛 Prefix/Suffix not inline with autocomplete field Active and happens at least with multiple cardinality link fields.
Discovered and closed a duplicate issue ✨ Multi-Link Fields styling applying flex class Active .
Updated IS and title

The current MR in both issues seem to break/ignore what the parent issue meant to achieve.
Since I'm clueless in CSS, here is a patch that reverts the changes from #3471459.
Hopefully someone can provide a proper fix.

Just brainstorming:

Is it even possible to achieve this with just CSS? I.e. having the individual parts of the element arranged vertically, but then within that arrange prefix, input, and suffix horizontally?

My gut impulse would be to change Claro's form-element.html.twig to wrap prefix, field, and suffix in an additional div we can then style separately.

Something like

<div class="form-item__wrapper">
  {% if prefix is not empty %}
    <span class="form-item__prefix{{ disabled == 'disabled' ? ' is-disabled' }}">{{ prefix }}</span>
  {% endif %}
  {% if description_display == 'before' and description.content %}
    <div{{ description.attributes.addClass(description_classes) }}>
      {{ description.content }}
    </div>
  {% endif %}
  {{ children }}
  {% if suffix is not empty %}
    <span class="form-item__suffix{{ disabled == 'disabled' ? ' is-disabled' }}">{{ suffix }}</span>
  {% endif %}
</div>

Then we could orient the other parts vertically and the wrapped bits horizontally?

I also have issues with multi-value field where inside it uses a custom field widget with multiple fields.

Before #3471459 it was rendered as:

After I have it like this: