fix: set the search icon to be on the same level with the input field (#2043)

* fix: set the search icon on the correct level with the input

* fix: update the layout of selected pills

Author: musale

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss

@@ -39,6 +39,7 @@ mgt-people-picker .root {
   border: calc(var(--stroke-width) * 1px) solid transparent;
   border-radius: calc(var(--control-corner-radius) * 1px);
   min-height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
+  padding: 3px;
 
   &:hover {
     background: padding-box linear-gradient(var(--neutral-fill-input-focus), var(--neutral-fill-input-focus)),
@@ -52,7 +53,6 @@ mgt-people-picker .root {
   &.disabled {
     pointer-events: none;
   }
-  padding: 4px;
 
   .people-picker-inner {
     flex: 1 1 auto;
@@ -67,7 +67,12 @@ mgt-people-picker .root {
 
   .flyout {
     .search-box {
-      margin: 1px 2px 8px;
+      display: flex;
+      height: 23px;
+
+      .search-icon {
+        padding: 5px;
+      }
 
       &.search-box-start {
         line-height: normal;
@@ -79,7 +84,6 @@ mgt-people-picker .root {
         box-sizing: border-box;
         border-width: 0;
         border-style: none;
-        width: 100%;
         display: flex;
         flex: 1 0 auto;
         font-family: $font-family;
@@ -100,7 +104,9 @@ mgt-people-picker .root {
     }
 
     .flyout-root {
-      padding: 0;
+      position: relative;
+      top: 8px;
+      padding: unset;
       border-radius: 2px;
       min-width: 260px;
       overflow-y: auto;
@@ -115,7 +121,9 @@ mgt-people-picker .root {
 
       .people-list {
         list-style: none;
-        padding: 0;
+        padding: unset;
+        margin: unset;
+
         .list-person {
           display: flex;
           flex-direction: row;
@@ -167,15 +175,14 @@ mgt-people-picker .root {
 
     &__person-wrapper {
       display: flex;
-      margin: 0 4px;
+      margin: 1px;
       align-items: center;
       border-radius: 12px;
-      height: 24px;
+      height: 23px;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
       position: relative;
-      top: 3px;
       background-color: set-var(selected-person__background-color, $theme-default, $people-picker);
       &:hover {
         background-color: $person-wrapper-background-hover;
@@ -256,96 +263,6 @@ mgt-people-picker .root {
       @extend .selected-list__person-wrapper-highlighted;
       background-color: #006cbe;
     }
-
-    .flyout {
-      .search-box {
-        margin: 1px 2px 8px;
-        display: inline-flex;
-
-        &.search-box-start {
-          line-height: normal;
-          margin-inline-start: 0px;
-          margin-inline-end: 0px;
-        }
-
-        .search-icon {
-          padding: 10px 10px 0px 8px;
-        }
-
-        &__input {
-          box-sizing: border-box;
-          border-width: 0;
-          border-style: none;
-          width: 100%;
-          display: flex;
-          flex: 1 0 auto;
-          font-family: $font-family;
-          position: relative;
-          top: 3px;
-          outline: none;
-          font-style: normal;
-          font-weight: normal;
-          font-size: 14px;
-          background-color: $input__background-color;
-          color: $color;
-          word-spacing: inherit;
-          text-indent: inherit;
-          letter-spacing: inherit;
-          &::placeholder {
-            color: $placeholder__color;
-          }
-        }
-      }
-
-      .flyout-root {
-        padding: 0;
-        min-width: 260px;
-        overflow-y: auto;
-        text-align: left;
-        list-style-type: none;
-        background-color: $dropdown__background-color;
-        max-height: var(--mgt-flyout-set-height, unset);
-        margin-top: 17px;
-
-        li {
-          cursor: pointer;
-        }
-
-        .people-list {
-          .list-person {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            padding: 10px;
-            margin: var(--file-item-margin, 4px);
-            border-radius: 4px;
-            &:hover {
-              background-color: $dropdown-item__background-color--hover;
-            }
-            &.focused {
-              background-color: $dropdown-item__background-color--hover;
-            }
-            .people-person-text-area {
-              margin-left: 13px;
-              flex: 1 1 0;
-              max-height: 40px;
-              overflow: hidden;
-              color: $color;
-
-              .people-person-text {
-                font-size: 14px;
-                font-weight: normal;
-                margin: 0;
-                padding: 0;
-                &.highlight-search-text {
-                  font-weight: bold;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
   }
 }