From badf863776ca1374fbe54c0562197678d209a005 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 17 Jul 2023 09:30:56 +0200
Subject: [PATCH] feat: improve mobile display, long texts and undefined
 choices

---
 .../dropdown-selector/dropdown-selector.component.html   | 4 ++--
 .../lib/dropdown-selector/dropdown-selector.component.ts | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html
index 05a91a6f8c..817a38f115 100644
--- a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html
+++ b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html
@@ -1,4 +1,4 @@
-<div class="flex items-start sm:flex-row sm:items-center relative w-full">
+<div class="flex items-start flex-col sm:flex-row sm:items-center relative w-full" *ngIf="choices">
   <span
     *ngIf="showTitle"
     class="tracking-wide text-sm mb-2 sm:mb-0 sm:mr-2 whitespace-nowrap"
@@ -8,7 +8,7 @@
   </span>
   <gn-ui-button
     type="outline"
-    class="grow"
+    class="grow min-w-[165px]"
     extraClass="w-full !p-[8px] !pl-[16px] {{ extraClass }}"
     [title]="title"
     [attr.aria-owns]="id"
diff --git a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts
index 6d5ab09dfb..a4400d4f4e 100644
--- a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts
+++ b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts
@@ -19,6 +19,8 @@ export type DDChoices<T> = Array<{
   value: T
 }>
 
+const DEFAULT_ROW_NUMBERS = 6
+
 @Component({
   selector: 'gn-ui-dropdown-selector',
   templateUrl: './dropdown-selector.component.html',
@@ -67,11 +69,14 @@ export class DropdownSelectorComponent implements OnInit {
   }
 
   getChoiceLabel(): string {
-    return this.selectedChoice.label
+    return (
+      this.selectedChoice.label.substring(0, 50) +
+      (this.selectedChoice.label.length > 50 ? '...' : '')
+    )
   }
 
   ngOnInit(): void {
-    if (!this.maxRows) this.maxRows = 6
+    if (!this.maxRows) this.maxRows = DEFAULT_ROW_NUMBERS
   }
 
   isSelected(choice) {