autocomplete width.

frontend/app/framework/angular/forms/editors/autocomplete.component.html

@@ -16,7 +16,7 @@
 
 
     <ng-container *sqxModal="snapshot.suggestedItems.length > 0" position="bottom-left">
-        <div class="control-dropdown" [sqxAnchoredTo]="input" position="bottom-left" #container @fade>
+        <div class="control-dropdown" [sqxAnchoredTo]="input" [style.width]="dropdownWidth" position="bottom-left" #container @fade>
             <div *ngFor="let item of snapshot.suggestedItems; let i = index" class="control-dropdown-item control-dropdown-item-selectable"
                 [class.active]="i === snapshot.suggestedIndex"
                 (mousedown)="selectItem(item)"

frontend/app/framework/angular/forms/editors/autocomplete.component.scss

@@ -1,7 +1,3 @@
-.control-dropdown {
-    width: 18rem;
-}
-
 .control-container {
     position: relative;
 }

frontend/app/framework/angular/forms/editors/autocomplete.component.ts

@@ -80,6 +80,9 @@ export class AutocompleteComponent extends StatefulControlComponent<State, Reado
     @Input()
     public debounceTime = 300;
 
+    @Input()
+    public dropdownWidth = '18rem';
+
     @ContentChild(TemplateRef, { static: false })
     public itemTemplate: TemplateRef<any>;
 

frontend/app/shell/pages/internal/search-menu.component.html

@@ -1,6 +1,7 @@
 <ng-container *ngIf="searchSource.selectedAppOrNull | async">
     <div class="search-container">
         <sqx-autocomplete [source]="searchSource" inputName="searchMenu" placeholder="Quick Nav (Press 'q')" icon="search" #searchControl
+            dropdownWidth="30rem"
             [ngModel]="selection"
             (ngModelChange)="selectResult($event)">
             <ng-template let-result="$implicit">
@@ -12,7 +13,7 @@
                         {{result.name}}
                     </div>
                     <div class="col-auto text-right" *ngIf="result.label">
-                        <div class="badge badge-pill badge-primary">{{result.label}}</div>
+                        <div class="badge badge-pill badge-primary ml-2">{{result.label}}</div>
                     </div>
                 </div>
             </ng-template>

frontend/app/shell/pages/internal/search-menu.component.scss

@@ -9,12 +9,6 @@
     i {
         color: $color-dark-foreground;
     }
-
-    .dropdown-container {
-        max-width: 30rem;
-        min-width: 10rem;
-        width: auto;
-    }
 }
 
 .search-container {