The 'M' of Machine name overlaps with the green border around text box.

Thanks for the patch @imganesh.

Review of patch #3:

1. Claro is included in Drupal core as an experimental theme now, so patches need to be made against the Drupal core repo.
2. diff --git a/css/src/components/form.css b/css/src/components/form.css
   The CSS src directory isn't used anymore, since #3088805: Simplify Claro's CSS directory structure.
3. Changes should be made to the PostCSS file (form.pcss.css). Instructions are in Drupal core using PostCSS for development
4. +.form-item__suffix .machine-name-label {
   I wonder if this can be generalized to .form-item__suffix? There will be other cases where this happens. In live websites, number fields will often have a suffix.
5. + margin-left: 0.75rem;
   Does it need to be as much as this? I tried in the browser dev tools, and 0.25rem was enough to clear the green focus indicator.

I agree with your point for making generalized to `.form-item__suffix`. I tested this issue with other cases and it was reproducible.

I agree with your point for making generalized to `.form-item__suffix`. I tested this issue with other cases and it was reproducible.

I have applied patch #7. But still I see the overlapping of 'M' with the green border around text box. I have attached screenshot also for reference.

@imganesh: I believe you forgot to compile the CSS. Check the documentation of Front-end developer tools in core.

Thanks @antoineh, I have updated the patch with compiled CSS.

Thanks @antoineh, I have updated the patch with compiled CSS.

Looks good.

Some comments to consider:

• The margin should only be applied when the suffix is behind the input field. On mobile screens this is not the case (I believe 600px is the breakpoint where the layout switches). See image under list for reference of the issue.
• Maybe we should add a comment why this margin is being applied.
• A personal nitpick: maybe we could use the --space-xs variable (equals to 0.5rem). We have these defined so why not use them :)

Addressed notes of comment #13.

Tested patch from #14 for mobile and desktop resolutions in Chrome, FF, Safari and IE browsers. Result is OK

31 coding standards messages

Coding standards check must pass, see https://www.drupal.org/pift-ci-job/1614456

Maybe #18 out of scope there.

What reported as coding standard warning for the form.pcss.css file are false positives caused from the fact the coding standard rules aren't able to handle .pcss files. (What is valid syntax for a .pcss file is not valid syntax for a .css file.)

Embedding the "before" and "after" screenshots in the IS for easier review.

On a design perspective the change is 👍

+++ b/core/themes/claro/css/components/form.css
@@ -189,6 +189,14 @@ tr .form-item,
+    margin-left: 0.5rem;

+++ b/core/themes/claro/css/components/form.pcss.css
@@ -114,6 +114,13 @@ tr .form-item,
+    margin-left: var(--space-xs);

We should add RTL styles for this 🧐

RTL styles added

Tested patch from #28 for mobile and desktop resolutions in Chrome, FF, Safari and IE browsers. Result is OK

Tagging for @lauriii's review again. Thanks for the updated patch!

1. +++ b/core/themes/claro/css/components/form.pcss.css
   @@ -114,6 +114,17 @@ tr .form-item,
   +    margin-left: var(--space-xs);
   

   Let's add comment here to highlight that this is for LTR https://www.drupal.org/docs/develop/standards/css/css-formatting-guideli...

2. +++ b/core/themes/claro/css/components/form.pcss.css
   @@ -114,6 +114,17 @@ tr .form-item,
   +  [dir="rtl"] .form-item__suffix {
   +    margin-right: var(--space-xs);
   +  }
   

   We should reset the margin-left here so that both, LTR and RTL behave in the same way.

Tested patch from #35 for mobile and desktop resolutions in Chrome, FF, Safari and IE browsers. Result is OK

I think we missed the 1 point by laurii

+++ b/core/themes/claro/css/components/form.pcss.css
@@ -114,6 +114,17 @@ tr .form-item,
+    margin-left: var(--space-xs);

Let's add comment here to highlight that this is for LTR https://www.drupal.org/docs/develop/standards/css/css-formatting-guideli...

LTR comment added

tested #39 which is slight improvement from #35 with respect to format standardization.

It is working as expected.

Going by the practice tagging issue to be review by front-end manager

Since the input element is set as display block with max-width: 600px, we should use min-width: 601px here. This is such a small change so I made the change on commit.

Committed beee042 and pushed to 9.1.x. We could probably port this to 9.0.x and 8.9.x but will confirm with other committers. Thanks!

Given that Claro is in beta, and the bugfix is not all that disruptive, I think it is safe to backport. Applied #39 as well as @lauriii's interdiff from #43 to 9.0.x, committed, and cherry-picked to 8.9.x. Nice work!