From 90f8dd194f5c1f923c8fe7e3d153ac648fa5cf03 Mon Sep 17 00:00:00 2001
From: nod_ <nod_@598310.no-reply.drupal.org>
Date: Fri, 19 Jul 2024 23:31:07 +0200
Subject: [PATCH] Issue #3163127 by scott_euser, Gauravvvv, sd9121, djsagar,
 ranjith_kumar_k_u, AkshayAdhav, _utsavsharma, sarvjeetsingh, komalk, Nitin
 shrivastava, ameymudras, pradhumanjain2311, boulaffasae, kostyashupenko,
 bnjmnm, meena.bisht, ambuj_gupta, sonam.chaturvedi, Sakthivel M, Utkarsh_33,
 KondratievaS, ressa: Autocomplete input text can visibly overflow under
 magnifier icon

---
 .../themes/claro/css/components/autocomplete-loading.module.css | 2 ++
 .../claro/css/components/autocomplete-loading.module.pcss.css   | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css
index 45a71dea3f4..491b8a8585a 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.css
@@ -34,6 +34,8 @@
  */
 
 .js .form-autocomplete {
+  margin-inline-end: calc(var(--input-border-size) - 1.5 * var(--input-padding-horizontal));
+  padding-inline-end: calc(var(--input-padding-horizontal) * 2.5 - var(--input-border-size));
   background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: 100% 50%;
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
index b4323d79e8f..ceda95199e3 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
@@ -28,6 +28,8 @@
 
 .js {
   & .form-autocomplete {
+    margin-inline-end: calc(var(--input-border-size) - 1.5 * var(--input-padding-horizontal));
+    padding-inline-end: calc(var(--input-padding-horizontal) * 2.5 - var(--input-border-size));
     background-image: url(../../images/icons/868686/magnifier.svg);
     background-repeat: no-repeat;
     background-position: 100% 50%;