Merged PR 1871: fix(ui-dropdown): improve dropdown usability and conditional rendering

fix(ui-dropdown): improve dropdown usability and conditional rendering

Refines the logic for displaying quantity and product category dropdowns in the return details order group item controls. Ensures dropdowns are only shown when appropriate and maintains accessibility and user experience.

Ref: #5189

libs/oms/feature/return-details/src/lib/return-details-order-group-item-controls/return-details-order-group-item-controls.component.html

@@ -1,4 +1,6 @@
-<div class="flex flex-row w-full justify-end -mb-4 desktop:mb-0">
+<div
+  class="flex flex-row justify-end -mb-4 desktop:mb-0 w-[13.4375rem] desktop:w-full"
+>
   @if (quantityDropdownValues().length > 1) {
     <ui-dropdown
       class="quantity-dropdown"

libs/oms/feature/return-details/src/lib/return-details-order-group-item-controls/return-details-order-group-item-controls.component.scss

@@ -1,9 +1,13 @@
 :host {
-  @apply flex flex-col-reverse  items-end desktop:flex-row desktop:justify-center desktop:items-center gap-4;
+  @apply flex flex-col-reverse items-end desktop:flex-row desktop:justify-center desktop:items-center gap-4;
+
+  .product-dropdown.ui-dropdown {
+    @apply max-w-[13.4375rem] desktop:max-w-full;
+  }
 
   :has(.product-dropdown):has(.quantity-dropdown) {
     .quantity-dropdown.ui-dropdown {
-      @apply border-r-0 pr-4;
+      @apply border-r-0 pr-4 pl-5 max-w-20 desktop:max-w-full;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
 
@@ -15,7 +19,7 @@
     }
 
     .product-dropdown.ui-dropdown {
-      @apply border-l-0 pl-4;
+      @apply border-l-0 max-w-[8.75rem] desktop:max-w-full pr-5 pl-4;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
 

libs/ui/input-controls/src/lib/dropdown/_dropdown.scss

@@ -10,7 +10,7 @@
   justify-content: space-between;
 
   ng-icon {
-    @apply size-6;
+    @apply min-w-5 size-5 mt-[0.125rem];
   }
 
   &.disabled {
@@ -58,6 +58,10 @@
   }
 }
 
+.ui-dropdown__text {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
 .ui-dropdown__options {
   // Fixed typo from ui-dorpdown__options
   display: inline-flex;

libs/ui/input-controls/src/lib/dropdown/dropdown.component.html

@@ -1,4 +1,4 @@
-<span>{{ viewLabel() }}</span>
+<span [class]="['ui-dropdown__text']">{{ viewLabel() }}</span>
 <ng-icon [name]="isOpenIcon()"></ng-icon>
 
 <ng-template