The machine name label gets too close to the next field

This could be added.

1. Adding patch in elements.css file.
2. Attaching before-after screenshots.

Patch needs to be reviewed.

Added inline screenshots to summary, plus reminder to clear cache.
Patch works (though I've not searched for regressions elsewhere)
Coding style fine.

Needs browser testing.

Nobody's currently listed as a maintainer for seven...?

Patch works as expected.

Hi Prashant.c ,Thanks! for the patch it works the same for me.

+++ b/core/themes/seven/css/base/elements.css
@@ -172,3 +172,6 @@ details summary:focus,
+  margin: 0.5em;

This is applying margin to the top and bottom and does not match the solution proposed in the issue summary. Plus given that we're dealing with horizontal margins it would be good to get an rtl screenshot too.

(Ignore this)

@alexpott - Ugh, sorry, not sure how I failed to spot that. And yes, needed adjusting for RTL too as .machine-name-label and .machine-name-value are displayed adjacently inline. Issue summary updated with new code and screenshots.

Could someone else please review?

Re-rolled with 9.1.x, Kindly review the attached patch.

Before patch SS:

After patch SS:

Thanks!

Verified and tested patch #16.
Patch applied successfully and looks good to me.

Testing Steps:

# Go to Structure
# Go to Content Type
# Click on Manage fields - In front of basic page
# Click on Add Field
# SELECT ANY field in Add new field
# Fill any name in label field box
# User is able to see "Machine name: field_date‎"
# Should have some space after the label field box
# Check this for LTR and RTL

Can be a move to RTBC.
Please refer attached screenshots

Looks like un-related fail. Marking it as RTBC.

Rerolled the patch for 9.2 dev. Please have a look.

The above patch works fine.

Before patch LTR

After patch LTR

Before patch RTL

After patch RTL

RTBC

+++ b/core/themes/seven/css/base/elements.css
@@ -180,3 +180,9 @@ img {
+[dir="ltr"] span.machine-name-label {
+  margin: 0 0 0 0.5em;

We can remove the dir="ltr" from this selector. We should add inline comment to the margin to explain that it's only for LTR.

I'm also wondering if we need to use the margin property and override all of the margin values or could we use just margin-left?

Agree with the changes suggested by @lauriii in #27. Updating the patch in #24 as per suggestions in #27. Kindly review.

Thank you!

The above patch works fine for me.
Thanks
RTBC+1

Patch #28 applied cleanly and it is working well. Added screenshot for reference.

Tested the patch (2821827-28.patch) with (9.5.x-dev and below version), it's working fine applied space between the label field and machine name in both LTR and RTL cases, good for RTBC.

Patch #28 applied successfully and it is working fine.
Before Patch Apply:

After Patch Apply

No need to apply the #28 patch.
Already space available before machine name in branch 9.5.x.

Reviewed patch mentioned in #28 with Drupal 9.5.x-dev. Works fine for me. Space added in between label and machine name in LTR and RTL in both scenarios. RTBC +1.

1. --- a/core/themes/seven/css/base/elements.css
   +++ b/core/themes/seven/css/base/elements.css
   

   There's an issue with this solution on narrower widths. When the viewport is small enough for the input to be 100% width, the machine name is moved below the input, then has an unwanted indent. Perhaps this can be wrapped in the same media query that makes the input 100% width?

2. +++ b/core/themes/seven/css/base/elements.css
   @@ -180,3 +180,9 @@ img {
   +span.machine-name-label {
   

   No need to include the span here or in machine-name-value

3. +++ b/core/themes/seven/css/base/elements.css
   @@ -180,3 +180,9 @@ img {
   +  margin-left: 0.5em; /* LTR */
   

   This doesn't need the LTR because it isn't changed in the RTL style

4. +++ b/core/themes/seven/css/base/elements.css
   @@ -180,3 +180,9 @@ img {
   +[dir="rtl"] span.machine-name-value {
   

   This probably doesn't have to be RTL, the margin on the right isn't disruptive if it's in LTR.

Kindly review patch for version 9.5x,,,

#44 is just the patch from #28. I requested changes to that patch in #43 that have not been addressed.

Rerolled patches are only needed if the patch no longer applies to the current dev branch of Drupal. You can determine if a patch needs a reroll (such as #28), click "Add test / retest" and choose to test on the current dev branch. I just did this for #28 and the patch applies on 9.5, which confirms the reroll in #44 was not needed.

Even if the reroll WAS needed, it should not have been set to "Needs Review", because my review feedback in #43 hasn't been addressed, so it still "Needs Work"

@bnjmnm Can you please add a screenshot so it will be easier to understand?

Thanks

I will work on this.

The Seven theme has been removed from Drupal 10 core. I confirmed that this issue only affects Seven and no other themes included with Drupal core, so I am moving this to the contributed Seven project.