dotCMS/core#19585 UI bug in the login as selector

* Fixes the UI bug in Login As and changed how the dot-searchable-dropdown overlay width was being set

* Fix tests

* Removed fit from tests

* Added test for overlayWidth

* Removed fit

src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.html

@@ -17,7 +17,7 @@
         icon="pi pi-chevron-down"
         iconPos="right"
         type="button"
-        [ngStyle]="{ width: width + 'px' }"
+        [ngStyle]="{ width: width }"
         [disabled]="disabled"
     ></button>
 </ng-template>
@@ -28,7 +28,7 @@
     (onShow)="showOverlayHandler()"
     [dismissable]="true"
     [styleClass]="cssClass"
-    [style]="{ 'min-height': overlayPanelMinHeight + 'px', width: (overlayWidth || width) + 'px' }"
+    [style]="{ 'min-height': overlayPanelMinHeight + 'px', width: overlayWidth }"
     appendTo="body"
 >
     <header class="searchable-dropdown__search">

src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.spec.ts

@@ -187,7 +187,7 @@ describe('SearchableDropdownComponent', () => {
     it('should set CSS class, width', fakeAsync(() => {
         hostFixture.componentInstance.data = data;
         hostFixture.componentInstance.cssClass = 'testClass';
-        hostFixture.componentInstance.overlayWidth = '650';
+        hostFixture.componentInstance.overlayWidth = '650px';
         hostFixture.detectChanges();
         tick();
 

src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts

@@ -116,7 +116,7 @@ export default {
         ],
         placeholder: 'Select something',
         labelPropertyName: 'label',
-        width: '300'
+        width: '300px'
     }
 } as Meta;
 

src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.ts

@@ -71,11 +71,23 @@ export class SearchableDropdownComponent
     @Input()
     persistentPlaceholder: boolean;
 
+    /**
+     * Sets the width of the searchable-dropdown button
+     *
+     * The CSS unit is **required**.
+     * @memberof SearchableDropdownComponent
+     */
     @Input()
-    width = '300';
+    width = '300px';
 
+    /**
+     * Sets the width of the searchable-dropdown overlay
+     *
+     * The CSS unit is **required**.
+     * @memberof SearchableDropdownComponent
+     */
     @Input()
-    overlayWidth;
+    overlayWidth = '300px';
 
     @Input()
     multiple: boolean;

src/app/view/components/dot-container-selector/dot-container-selector.component.html

@@ -9,8 +9,8 @@
     [labelPropertyName]="['name', 'parentPermissionable.hostname']"
     placeholder="{{ 'editpage.container.add.label' | dm }}"
     persistentPlaceholder="true"
-    width="160"
-    overlayWidth="300"
+    width="172px"
+    overlayWidth="300px"
     class="d-secondary"
     [multiple]="multiple"
 >

src/app/view/components/dot-persona-selector/dot-persona-selector.component.html

@@ -6,7 +6,7 @@
     [(ngModel)]="value"
     [action]="addAction"
     [data]="personas"
-    [width]="448"
+    width="448px"
     [rows]="paginationPerPage"
     [totalRecords]="paginationService.totalRecords"
     labelPropertyName="name"

src/app/view/components/dot-persona-selector/dot-persona-selector.component.spec.ts

@@ -131,7 +131,8 @@ describe('DotPersonaSelectorComponent', () => {
 
     it('should set dot-searchable-dropdown with right attributes', () => {
         expect(dropdown.componentInstance.labelPropertyName).toBe('name');
-        expect(dropdown.componentInstance.width).toBe(448);
+        expect(dropdown.componentInstance.width).toBe('448px');
+        expect(dropdown.componentInstance.overlayWidth).toBe('300px');
         expect(dropdown.componentInstance.rows).toBe(10);
         expect(dropdown.componentInstance.totalRecords).toBe(1);
     });

src/app/view/components/dot-toolbar/components/dot-login-as/dot-login-as.component.html

@@ -13,6 +13,7 @@
             id="login-as-form"
             #formEl="ngForm"
             novalidate
+            class="p-fluid"
         >
             <div class="p-field">
                 <!--TODO: get rid of this let autoComplete when this is fixed: https://github.com/primefaces/primeng/issues/745-->
@@ -28,7 +29,7 @@
                     placeholder="{{ 'loginas.select.loginas.user' | dm }}"
                     formControlName="loginAsUser"
                     labelPropertyName="fullName"
-                    width="100%"
+                    overlayWidth="300px"
                 >
                 </dot-searchable-dropdown>
             </div>

src/app/view/components/dot-toolbar/dot-toolbar.component.html

@@ -26,7 +26,7 @@
             [archive]="false"
             class="toolbar__site-selector"
             cssClass="d-secondary"
-            width="200"
+            width="200px"
         >
         </dot-site-selector>
         <span class="toolbar__sep"></span>

src/app/view/components/dot-toolbar/dot-toolbar.spec.ts

@@ -158,7 +158,7 @@ describe('DotToolbarComponent', () => {
     it(`should pass class and width`, () => {
         const siteSelector: DebugElement = fixture.debugElement.query(By.css('dot-site-selector'));
         expect(siteSelector.componentInstance.cssClass).toBe('d-secondary');
-        expect(siteSelector.componentInstance.width).toBe('200');
+        expect(siteSelector.componentInstance.width).toBe('200px');
     });
 
     it('should toggle menu and update icon on click', () => {