mgt-people-picker patch (#823)

beth-panx · nmetulev · web-flow · commit 239afd57089f · 2020-12-09T12:58:38.000-08:00
* Fix people picker height jump as select/de-select person

* Fix firefox flyout bug

* Add spacing for people picker

Co-authored-by: Nikola Metulev &lt;nmetulev@users.noreply.github.com&gt;
diff --git a/.storybook/addons/codeEditorAddon/codeAddon.js b/.storybook/addons/codeEditorAddon/codeAddon.js
@@ -104,25 +104,28 @@ export const withCodeEditor = makeDecorator({
         );
 
         const docContent = `
-      <html>
-        <head>
-          <script type="module" src="${mgtScriptName}"></script>
-          <script type="module">
-            import {Providers, MockProvider} from "${mgtScriptName}";
-            Providers.globalProvider = new MockProvider(true);
-          </script>
-          <style>
-            ${css}
-          </style>
-        </head>
-        <body>
-          ${html}
-          <script type="module">
-            ${js}
-          </script>
-        </body>
-      </html>
-      `;
+          <html>
+            <head>
+              <script type="module" src="${mgtScriptName}"></script>
+              <script type="module">
+                import {Providers, MockProvider} from "${mgtScriptName}";
+                Providers.globalProvider = new MockProvider(true);
+              </script>
+              <style>
+                html, body {
+                  height: 100%;
+                }
+                ${css}
+              </style>
+            </head>
+            <body>
+              ${html}
+              <script type="module">
+                ${js}
+              </script>
+            </body>
+          </html>
+        `;
 
         doc.open();
         doc.write(docContent);
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss
@@ -33,23 +33,22 @@ mgt-people-picker .root {
   &.focused {
     border-color: $input__border-color--focus;
   }
-  padding-bottom: 6px;
+  padding: 6px 0 0;
 
   .selected-list {
     flex: 1 0 auto;
     display: flex;
     flex-wrap: wrap;
     vertical-align: middle;
-    margin: 0 2px 0 0;
+    margin: 0 8px;
     list-style-type: none;
-    padding-left: 8px;
     font-style: normal;
     font-weight: normal;
     overflow: hidden;
 
     &__person-wrapper {
       display: flex;
-      margin: 5px 5px 0px 0;
+      margin: 0 5px 6px 0;
       align-items: center;
       border-radius: 15px;
       height: 24px;
@@ -66,8 +65,8 @@ mgt-people-picker .root {
         margin-left: 0px;
         --color: #{$color};
         color: $color;
-        margin-bottom: 1px;
-        margin-right: 4px;
+        padding-bottom: 1px;
+        padding-right: 4px;
       }
 
       &__overflow {
@@ -103,10 +102,9 @@ mgt-people-picker .root {
 
     .flyout {
       .search-box {
-        margin: 6px 2px 1px 3px;
+        margin: 1px 2px 8px;
 
         &.search-box-start {
-          margin: 6px 0px 1px 0px;
           line-height: normal;
           margin-inline-start: 0px;
           margin-inline-end: 0px;
