From 4cfbaa8c2dd76dfef336c4b7e9604caae153189b Mon Sep 17 00:00:00 2001
From: Kevin Davila <144152756+KevinDavilaDotCMS@users.noreply.github.com>
Date: Mon, 5 Feb 2024 11:23:32 -0500
Subject: [PATCH] fix(edit-content): Autocomplete component responsiveness
 #27421 (#27474)

* fixed expand on tags

* Changed selector on has() for SonarQube bug

* Removed border
---
 .../dotcms-theme/components/form/_autocomplete.scss        | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss
index 1080acfba8bd..f591d06a2df2 100644
--- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss
+++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss
@@ -10,10 +10,15 @@ p-autocomplete.p-inputwrapper-focus {
 .p-fluid .p-autocomplete.p-component, // To override the default behavior
 .p-autocomplete.p-component {
     display: grid;
-    align-items: center;
+    align-items: baseline;
     grid-template-columns: auto repeat(3, max-content); // This will make the grid to remove the columns that are not in the grid
 }
 
+.p-fluid .p-autocomplete.p-component:has(.p-icon-wrapper),
+.p-autocomplete.p-component:has(.p-icon-wrapper) {
+    grid-template-columns: max-content auto; // When have icon, have 2 grids: icon and tags
+}
+
 .p-autocomplete {
     @extend #form-field-extend;
     height: auto;