From e7ba117a2fb8dc4892163354c988b42bd164ab2e Mon Sep 17 00:00:00 2001
From: Florent Gravin <florent.gravin@camptocamp.com>
Date: Fri, 6 Oct 2023 10:12:46 +0200
Subject: [PATCH] style(autocomplete): fix right padding and placeholder
 ellipsis

does not work in chrome though
---
 .../lib/autocomplete/autocomplete.component.css  | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css
index 8c761459e8..a03749aa95 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css
@@ -1,10 +1,13 @@
+:host {
+  --input-height: 3.5em;
+}
 .clear-btn {
-  width: 3.5em;
+  width: var(--input-height);
+  right: var(--input-height);
   height: 100%;
-  right: 3.5em;
 }
 .search-btn {
-  width: 3.5em;
+  width: var(--input-height);
   height: 100%;
   border-left-width: 0.1em;
 }
@@ -15,9 +18,14 @@ mat-icon {
   font-size: 1.5em;
 }
 input {
-  height: 3.5em;
+  height: var(--input-height);
   padding: 1.05em;
+  padding-right: calc(2 * var(--input-height));
+}
+input:placeholder-shown {
+  text-overflow: ellipsis;
 }
+
 .mat-mdc-option.suggestion.mat-mdc-option-active {
   background-color: var(--color-primary-lightest);
 }