Issue #3163127 by scott_euser, Gauravvvv, sd9121, djsagar, ranjith_kumar_k_u,...

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

(cherry picked from commit 90f8dd19)

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%;

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%;