diff --git a/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.html b/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.html
index 3e7c8c7e79..5e356117be 100644
--- a/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.html
+++ b/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">
diff --git a/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.spec.ts b/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.spec.ts
index 76afbea5ee..d1195aafed 100644
--- a/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.spec.ts
+++ b/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();
 
diff --git a/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts b/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts
index 277f88adbb..434bdcd46b 100644
--- a/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts
+++ b/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;
 
diff --git a/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.ts b/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.ts
index d8199d9f74..2ff6e34207 100644
--- a/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.ts
+++ b/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;
diff --git a/src/app/view/components/dot-container-selector/dot-container-selector.component.html b/src/app/view/components/dot-container-selector/dot-container-selector.component.html
index 4e385e98eb..e3f4be59e0 100644
--- a/src/app/view/components/dot-container-selector/dot-container-selector.component.html
+++ b/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"
 >
diff --git a/src/app/view/components/dot-persona-selector/dot-persona-selector.component.html b/src/app/view/components/dot-persona-selector/dot-persona-selector.component.html
index c862af7302..879b4046e5 100644
--- a/src/app/view/components/dot-persona-selector/dot-persona-selector.component.html
+++ b/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"
diff --git a/src/app/view/components/dot-persona-selector/dot-persona-selector.component.spec.ts b/src/app/view/components/dot-persona-selector/dot-persona-selector.component.spec.ts
index 3cda61ffd2..4f1cc08bf9 100644
--- a/src/app/view/components/dot-persona-selector/dot-persona-selector.component.spec.ts
+++ b/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);
     });
diff --git a/src/app/view/components/dot-toolbar/components/dot-login-as/dot-login-as.component.html b/src/app/view/components/dot-toolbar/components/dot-login-as/dot-login-as.component.html
index ae48e3d582..ae9cda1b27 100644
--- a/src/app/view/components/dot-toolbar/components/dot-login-as/dot-login-as.component.html
+++ b/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>
diff --git a/src/app/view/components/dot-toolbar/dot-toolbar.component.html b/src/app/view/components/dot-toolbar/dot-toolbar.component.html
index f29df8e342..b9faf678fd 100644
--- a/src/app/view/components/dot-toolbar/dot-toolbar.component.html
+++ b/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>
diff --git a/src/app/view/components/dot-toolbar/dot-toolbar.spec.ts b/src/app/view/components/dot-toolbar/dot-toolbar.spec.ts
index 39ec2c1296..533eee833f 100644
--- a/src/app/view/components/dot-toolbar/dot-toolbar.spec.ts
+++ b/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', () => {