updated Claro theme renders badly for some content type edit forms

Do you have any screenshots that would make it easier to visualize the reported bug?

I reproduced the issue on Drupal 10 and added one article and kept claro as a default theme. As mentioned when users edit certain content types, the columnar layout that's supposed to appear doesn't work. I edited the article content type and couldn't see any of the issues mentioned. I am attaching screenshots for the test and visualization I have made. It would be helpful if you can share some of the screenshots about the issue.

I'm not seeing this issue. But if it's a render issue I don't think solving it with CSS is the track we want to take.

I'm attaching a screenshot that shows an example of how the Article edit form looks in my D10 install, before applying any correction to the styling.

I had the same phenomenon and investigated it, and it collapses when the field size, such as TITLE, exceeds 111. In my case, I had set it at 255, so it collapsed significantly.
I am attaching an image.

I'm experiencing this bug as well. If tracked this down to plain text fields with a Textfield size > 100. I was able to clearly reproduce this on a 1920 × 980px viewport size by:

1. Creating a new content type with only a Title and Body field
2. Going to "Manage form display" for the content type and changing the Title field Textfield widget "Textfield size" to "200"

In fact, this can be achieved directly in the browser with developer tools by simply changing the size attribute directly to "200".

It appears that the size attribute on the <input> element somehow overrides the max-width: 100% for .form-element causing the grid column width to expand accordingly. The text field itself does not expand.

I've confirmed that this occurs in MacOS Brave, Safari and Firefox, so it is not browser-specific.

In the attached screenshot, I've set the size attribute to "130" to show the impact on the layout of the secondary region on a viewport size of 1352 × 768px.

I have a couple of workarounds, neither of which is satisfactory or generalizable:

1. Add this CSS style rule, which sets all text fields to the maximum width of the content region:
   .form-element--type-text { width: 100% }
2. Configure the Textfield size display to always be 100 or less.

I'm experiencing this bug as well. If tracked this down to plain text fields with a Textfield size > 100.

Noting that for text fields within collapsible form groups, this bug is perceptible for Textfield size > 87. I am pretty sure that this depends on the browser viewport size though. I am using 1352 × 768px in this case.

Please check issue 3381219 - it may be related and could solve this.

Yes, thank you @klidifia! The patch in https://www.drupal.org/project/drupal/issues/3381219 🐛 Layout Issues with Claro theme Needs work resolved the issue that I described above and I'm pretty sure is what the original reporter identified. I'm going to mark this as a duplicate to drive others to that issue since it has more followers and is patched, even though I think the title for this issue might be more appropriate.

Hi everyone, I'm having a similar issue after upgrading D9 to D10 with Claro. I cannot see messages background text. Please see image example

Resolved. Like a dummy I had /admin/config/development/bootstrap_library All themes except those listed "checked" . Changed: Only the listed themes I wanted selected and the issue was resolved.