From beee042621a3d3e7f0440aede198897b2bd1d33a Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Fri, 5 Jun 2020 16:20:55 +0300
Subject: [PATCH] Issue #3097540 by imganesh, boulaffasae, antoineh, sauravk,
 KondratievaS, atul4drupal, Neetika K, Devipriya Rajamanickam: The 'M' of
 Machine name overlaps with the green border around text box

---
 core/themes/claro/css/components/form.css      | 13 +++++++++++++
 core/themes/claro/css/components/form.pcss.css | 12 ++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css
index e614b9e8dbcd..9a0e45e0dd8a 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -185,6 +185,19 @@ tr .form-item,
   color: #82828c;
 }
 
+/* Add some spacing so that the focus ring and suffix don't overlap. */
+
+@media screen and (min-width: 601px) {
+  .form-item__suffix {
+    margin-left: 0.5rem; /* LTR */
+  }
+
+  [dir="rtl"] .form-item__suffix {
+    margin-right: 0.5rem;
+    margin-left: 0;
+  }
+}
+
 /**
  * Form actions.
  */
diff --git a/core/themes/claro/css/components/form.pcss.css b/core/themes/claro/css/components/form.pcss.css
index 9ff2ac3b19f4..390944840de9 100644
--- a/core/themes/claro/css/components/form.pcss.css
+++ b/core/themes/claro/css/components/form.pcss.css
@@ -114,6 +114,18 @@ tr .form-item,
   color: var(--input--disabled-fg-color);
 }
 
+/* Add some spacing so that the focus ring and suffix don't overlap. */
+@media screen and (min-width: 601px) {
+  .form-item__suffix {
+    margin-left: var(--space-xs); /* LTR */
+  }
+
+  [dir="rtl"] .form-item__suffix {
+    margin-right: var(--space-xs);
+    margin-left: 0;
+  }
+}
+
 /**
  * Form actions.
  */
-- 
GitLab