[DSC-1573] fixes Search box in Navbar width in small screens

Author: alisaismailati

src/app/search-navbar/search-navbar.component.html

@@ -3,7 +3,7 @@
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
-             class="bg-transparent position-absolute form-control dropdown-menu-right pl-1 pr-4"
+             class="bg-transparent position-absolute form-control dropdown-menu-right pl-1 pr-4 search-input"
              [class.display]="searchExpanded ? 'inline-block' : 'none'"
              [tabIndex]="searchExpanded ? 0 : -1"
              [attr.data-test]="'header-search-box' | dsBrowserOnly">

src/app/search-navbar/search-navbar.component.scss

@@ -28,3 +28,8 @@ input[type="text"] {
 
 }
 
+@media screen and (max-width: map-get($grid-breakpoints, sm)) {
+  .search-input {
+    width: 55vw !important;
+  }
+}