fix css to no wrap in channel picker (#484)

Co-authored-by: Nikola Metulev <[email protected]>
Co-authored-by: Shane Weaver <[email protected]>

Author: 3 people

src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss

@@ -67,7 +67,7 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
     .channel-chosen-list {
       min-height: 29px;
       display: flex;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
       vertical-align: middle;
       margin: 0 0 0 0;
       list-style-type: none;
@@ -106,7 +106,7 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
         font-weight: normal;
         font-size: 14px;
         line-height: 19px;
-        background-color: $input-background-color;
+        background-color: transparent;
         color: $font-color;
         padding-left: 5px;
         &::placeholder {
@@ -120,7 +120,8 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
       .close-icon {
         display: inline-block;
         position: absolute;
-        right: 10px;
+        right: 0;
+        padding: 10px;
         line-height: normal;
         font-family: 'FabricMDL2Icons';
         margin-bottom: 1px;

src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts

@@ -287,7 +287,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
               ${!this._selectedItemState ? getSvg(SvgIcon.Search, '#252424') : ''}
             </div>
             <div class="channel-chosen-list">
-              ${this.renderSelected()} ${this.renderInput()}
+              ${this.renderSelected()} ${this.renderInput()} ${this.renderCloseButton()}
             </div>
           </div>
           <div class=${classMap(dropdownClasses)}>${this.renderDropdown()}</div>
@@ -313,9 +313,6 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
         <div class="selected-team-name">${this._selectedItemState.parent.item.displayName}</div>
         <div class="arrow">${getSvg(SvgIcon.TeamSeparator, '#B3B0AD')}</div>
         ${this._selectedItemState.item.displayName}
-        <div class="close-icon" @click="${() => this.selectChannel(null)}">
-          
-        </div>
       </li>
       <div class="search-icon">
         ${this._isFocused ? getSvg(SvgIcon.Search, '#252424') : ''}
@@ -352,6 +349,21 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
     `;
   }
 
+  /**
+   * Renders close button
+   *
+   * @protected
+   * @returns
+   * @memberof MgtTeamsChannelPicker
+   */
+  protected renderCloseButton() {
+    return html`
+      <div class="close-icon" @click="${() => this.selectChannel(null)}">
+        
+      </div>
+    `;
+  }
+
   /**
    * Renders dropdown content
    *