(css) Fix advanced mailbox search

We must rely on the pseudo-input-container to properly wrap the
md-select inside a md-toolbar.

NEWS

@@ -40,6 +40,7 @@ Bug fixes
  - [web] fixed path of destination mailbox in Sieve filter editor
  - [web] force copy of dragged contacts from global address books
  - [web] removed null characters from JSON responses
+ - [web] fixed advanced mailbox search when mailbox name is very long
  - [eas] hebrew folders encoding problem using EAS (#4240)
  - [eas] avoid sync requests for shared folders every second (#4275)
 

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -8,10 +8,13 @@
     <!-- in virtual mailbox mode -->
     <md-toolbar class="md-whiteframe-z1 md-hue-3"
                 ng-hide="!mailbox.service.$virtualPath || mailbox.mode.multiple">
-      <div class="md-toolbar-tools">
-        <md-input-container class="md-flex">
-          <label><var:string label:value="Search messages in"/></label>
-          <md-select ng-model="mailbox.service.$virtualPath">
+      <div class="md-toolbar-tools"
+         layout="row" layout-align="start start">
+        <div class="pseudo-input-container pseudo-input-container--compact md-flex sg-no-wrap">
+          <label class="pseudo-input-label pseudo-input-label">
+            <var:string label:value="Search messages in"/>
+          </label>
+          <md-select class="pseudo-input-field" ng-model="mailbox.service.$virtualPath">
             <md-option ng-value="">
               <span ng-bind="app.accounts[0].name"><!-- main account name --></span>
             </md-option>
@@ -23,7 +26,7 @@
                     ng-bind="folder.$displayName"><!-- mailbox name --></span>
             </md-option>
           </md-select>
-        </md-input-container>
+        </div>
         <md-menu>
           <md-button class="sg-icon-button" label:aria-label="More search options" ng-click="$mdMenu.open()">
             <md-icon>settings</md-icon>

UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss

@@ -54,13 +54,9 @@
   @include rtl(transform-origin, right center, left center);
 }
 
-.pseudo-input-label--no-margin,
-.button-label {
-  margin-top: 0;
-}
-
 .pseudo-input-field {
   display: block;
+  margin: 0;
   padding-top: $input-padding-top + 2;
   padding-bottom: $input-border-width-focused - $input-border-width-default;
   padding-left: 2px;
@@ -68,15 +64,9 @@
   border-width: 0;
 }
 
-.pseudo-input-field--underline {
-  @extend .pseudo-input-field;
-  border-bottom: 1px solid $colorGrayLighter;
-  &:focus,
-  &:active,
-  &:hover {
-    margin-bottom: ($line - 1);
-    border-bottom: 2px solid sg-color($sogoBlue, 500);
-  }
+md-select.pseudo-input-field {
+  margin-bottom: $mg;
+  padding: 0;
 }
 
 // The specs dimensions are too large to fit with angular-material
@@ -86,8 +76,3 @@
     margin-top: 0;
   }
 }
-
-input #inner-editor {
-  color: $colorGrayLight;
-  line-height: inherit;
-}