From cb4515542336a543ccb15f1ea9a9cb0ec4d33330 Mon Sep 17 00:00:00 2001
From: Tristan <tristan.watanabe@gmail.com>
Date: Mon, 30 Aug 2021 21:48:34 -0400
Subject: [PATCH] Panel: header and footer now reflow properly when zoomed in
 (#19547)

* move commands, header and footer inside scrollable content

* add height based media query which fixes header and footer on screen when minimum height is met

* update react snapshots

* Change files
---
 ...-6112fdea-f8c4-4731-90f1-466f69c0e659.json |   7 +
 .../react/src/components/Panel/Panel.base.tsx |  12 +-
 .../src/components/Panel/Panel.styles.ts      |  15 +-
 .../Panel/__snapshots__/Panel.test.tsx.snap   | 682 +++++++++---------
 4 files changed, 373 insertions(+), 343 deletions(-)
 create mode 100644 change/@fluentui-react-6112fdea-f8c4-4731-90f1-466f69c0e659.json

diff --git a/change/@fluentui-react-6112fdea-f8c4-4731-90f1-466f69c0e659.json b/change/@fluentui-react-6112fdea-f8c4-4731-90f1-466f69c0e659.json
new file mode 100644
index 00000000000000..b88d44a6c3b48e
--- /dev/null
+++ b/change/@fluentui-react-6112fdea-f8c4-4731-90f1-466f69c0e659.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Panel: header and footer now reflow properly when zoomed in.",
+  "packageName": "@fluentui/react",
+  "email": "tristan.watanabe@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/Panel/Panel.base.tsx b/packages/react/src/components/Panel/Panel.base.tsx
index 81fa15ffbb36f8..cdd045444f8495 100644
--- a/packages/react/src/components/Panel/Panel.base.tsx
+++ b/packages/react/src/components/Panel/Panel.base.tsx
@@ -241,16 +241,16 @@ export class PanelBase extends React.Component<IPanelProps, IPanelState> impleme
               style={customWidthStyles}
               elementToFocusOnDismiss={elementToFocusOnDismiss}
             >
-              <div className={_classNames.commands} data-is-visible={true}>
-                {onRenderNavigation(this.props, this._onRenderNavigation)}
-              </div>
               <div className={_classNames.contentInner}>
-                {(this._hasCustomNavigation || !hasCloseButton) &&
-                  onRenderHeader(this.props, this._onRenderHeader, this._headerTextId)}
                 <div ref={this._allowScrollOnPanel} className={_classNames.scrollableContent} data-is-scrollable={true}>
+                  <div className={_classNames.commands} data-is-visible={true}>
+                    {onRenderNavigation(this.props, this._onRenderNavigation)}
+                  </div>
+                  {(this._hasCustomNavigation || !hasCloseButton) &&
+                    onRenderHeader(this.props, this._onRenderHeader, this._headerTextId)}
                   {onRenderBody(this.props, this._onRenderBody)}
+                  {onRenderFooter(this.props, this._onRenderFooter)}
                 </div>
-                {onRenderFooter(this.props, this._onRenderFooter)}
               </div>
             </FocusTrapZone>
           </div>
diff --git a/packages/react/src/components/Panel/Panel.styles.ts b/packages/react/src/components/Panel/Panel.styles.ts
index 9a56a78235f157..d1821c78464a77 100644
--- a/packages/react/src/components/Panel/Panel.styles.ts
+++ b/packages/react/src/components/Panel/Panel.styles.ts
@@ -258,7 +258,14 @@ export const getStyles = (props: IPanelStyleProps): IPanelStyles => {
     commands: [
       classNames.commands,
       {
-        marginTop: 18,
+        paddingTop: 18,
+        selectors: {
+          [`@media (min-height: ${ScreenWidthMinMedium}px)`]: {
+            backgroundColor: semanticColors.bodyBackground,
+            position: 'sticky',
+            top: 0,
+          },
+        },
       },
       hasCustomNavigation && {
         marginTop: 'inherit',
@@ -334,6 +341,12 @@ export const getStyles = (props: IPanelStyleProps): IPanelStyles => {
         flexShrink: 0,
         borderTop: '1px solid transparent',
         transition: `opacity ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction2}`,
+        selectors: {
+          [`@media (min-height: ${ScreenWidthMinMedium}px)`]: {
+            position: 'sticky',
+            bottom: 0,
+          },
+        },
       },
       isFooterSticky && {
         background: semanticColors.bodyBackground,
diff --git a/packages/react/src/components/Panel/__snapshots__/Panel.test.tsx.snap b/packages/react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
index 837dd712cfc909..de3c9d7e1b7a66 100644
--- a/packages/react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
+++ b/packages/react/src/components/Panel/__snapshots__/Panel.test.tsx.snap
@@ -165,204 +165,209 @@ exports[`Panel allows the consumer to pass through popup props 1`] = `
           />
           <div
             className=
-                ms-Panel-commands
+                ms-Panel-contentInner
                 {
-                  margin-top: 18px;
+                  display: flex;
+                  flex-direction: column;
+                  flex-grow: 1;
+                  overflow-y: hidden;
                 }
-            data-is-visible={true}
           >
             <div
               className=
-                  ms-Panel-navigation
+                  ms-Panel-scrollableContent
                   {
-                    display: flex;
-                    justify-content: flex-end;
+                    overflow-y: auto;
                   }
+              data-is-scrollable={true}
             >
               <div
                 className=
-                    ms-Panel-header
-                    {
-                      align-self: flex-start;
-                      flex-grow: 1;
-                      padding-left: 24px;
-                      padding-right: 24px;
-                    }
-              >
-                <div
-                  aria-level={3}
-                  className=
-                      ms-Panel-headerText
-                      panel_class
-                      {
-                        -moz-osx-font-smoothing: grayscale;
-                        -webkit-font-smoothing: antialiased;
-                        color: #323130;
-                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                        font-size: 20px;
-                        font-weight: 600;
-                        hyphens: auto;
-                        line-height: 27px;
-                        overflow-wrap: break-word;
-                        word-break: break-word;
-                        word-wrap: break-word;
-                      }
-                  id="Panel0-headerText"
-                  role="heading"
-                >
-                  Test Panel
-                </div>
-              </div>
-              <button
-                className=
-                    ms-Button
-                    ms-Panel-closeButton
-                    ms-PanelAction-close
-                    ms-Button--icon
+                    ms-Panel-commands
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      background-color: transparent;
-                      border-radius: 2px;
-                      border: none;
-                      box-sizing: border-box;
-                      color: #605e5c;
-                      cursor: pointer;
-                      display: inline-block;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 20px;
-                      font-weight: 400;
-                      height: 32px;
-                      margin-right: 14px;
-                      outline: transparent;
-                      padding-bottom: 0;
-                      padding-left: 4px;
-                      padding-right: 4px;
-                      padding-top: 0;
-                      position: relative;
-                      text-align: center;
-                      text-decoration: none;
-                      user-select: none;
-                      width: 32px;
+                      padding-top: 18px;
                     }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                    .ms-Fabric--isFocusVisible &:focus:after {
-                      border: 1px solid transparent;
-                      bottom: 2px;
-                      content: "";
-                      left: 2px;
-                      outline: 1px solid #605e5c;
-                      position: absolute;
-                      right: 2px;
-                      top: 2px;
-                      z-index: 1;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      bottom: -2px;
-                      left: -2px;
-                      outline-color: ButtonText;
-                      right: -2px;
-                      top: -2px;
-                    }
-                    &:active > * {
-                      left: 0px;
-                      position: relative;
+                    @media (min-height: 480px){& {
+                      background-color: #ffffff;
+                      position: sticky;
                       top: 0px;
                     }
-                    &:hover {
-                      background-color: #f3f2f1;
-                      color: #323130;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                      border-color: Highlight;
-                      color: Highlight;
-                    }
-                    &:active {
-                      background-color: #edebe9;
-                      color: #005a9e;
-                    }
-                data-is-focusable={true}
                 data-is-visible={true}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyPress={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                type="button"
               >
-                <span
+                <div
                   className=
-                      ms-Button-flexContainer
+                      ms-Panel-navigation
                       {
-                        align-items: center;
                         display: flex;
-                        flex-wrap: nowrap;
-                        height: 100%;
-                        justify-content: center;
+                        justify-content: flex-end;
                       }
-                  data-automationid="splitbuttonprimary"
                 >
-                  <i
-                    aria-hidden={true}
+                  <div
                     className=
-                        ms-Icon
-                        ms-Button-icon
+                        ms-Panel-header
                         {
-                          display: inline-block;
+                          align-self: flex-start;
+                          flex-grow: 1;
+                          padding-left: 24px;
+                          padding-right: 24px;
                         }
+                  >
+                    <div
+                      aria-level={3}
+                      className=
+                          ms-Panel-headerText
+                          panel_class
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 20px;
+                            font-weight: 600;
+                            hyphens: auto;
+                            line-height: 27px;
+                            overflow-wrap: break-word;
+                            word-break: break-word;
+                            word-wrap: break-word;
+                          }
+                      id="Panel0-headerText"
+                      role="heading"
+                    >
+                      Test Panel
+                    </div>
+                  </div>
+                  <button
+                    className=
+                        ms-Button
+                        ms-Panel-closeButton
+                        ms-PanelAction-close
+                        ms-Button--icon
                         {
                           -moz-osx-font-smoothing: grayscale;
                           -webkit-font-smoothing: antialiased;
-                          font-family: "FabricMDL2Icons";
-                          font-style: normal;
-                          font-weight: normal;
-                          speak: none;
-                        }
-                        {
-                          flex-shrink: 0;
-                          font-size: 16px;
-                          height: 16px;
-                          line-height: 16px;
-                          margin-bottom: 0;
-                          margin-left: 4px;
-                          margin-right: 4px;
-                          margin-top: 0;
+                          background-color: transparent;
+                          border-radius: 2px;
+                          border: none;
+                          box-sizing: border-box;
+                          color: #605e5c;
+                          cursor: pointer;
+                          display: inline-block;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 20px;
+                          font-weight: 400;
+                          height: 32px;
+                          margin-right: 14px;
+                          outline: transparent;
+                          padding-bottom: 0;
+                          padding-left: 4px;
+                          padding-right: 4px;
+                          padding-top: 0;
+                          position: relative;
                           text-align: center;
+                          text-decoration: none;
+                          user-select: none;
+                          width: 32px;
                         }
-                    data-icon-name="Cancel"
-                    style={
-                      Object {
-                        "fontFamily": "\\"FabricMDL2Icons\\"",
-                      }
-                    }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 2px;
+                          content: "";
+                          left: 2px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 2px;
+                          top: 2px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          bottom: -2px;
+                          left: -2px;
+                          outline-color: ButtonText;
+                          right: -2px;
+                          top: -2px;
+                        }
+                        &:active > * {
+                          left: 0px;
+                          position: relative;
+                          top: 0px;
+                        }
+                        &:hover {
+                          background-color: #f3f2f1;
+                          color: #323130;
+                        }
+                        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                          border-color: Highlight;
+                          color: Highlight;
+                        }
+                        &:active {
+                          background-color: #edebe9;
+                          color: #005a9e;
+                        }
+                    data-is-focusable={true}
+                    data-is-visible={true}
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyPress={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseUp={[Function]}
+                    type="button"
                   >
-                    
-                  </i>
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            className=
-                ms-Panel-contentInner
-                {
-                  display: flex;
-                  flex-direction: column;
-                  flex-grow: 1;
-                  overflow-y: hidden;
-                }
-          >
-            <div
-              className=
-                  ms-Panel-scrollableContent
-                  {
-                    overflow-y: auto;
-                  }
-              data-is-scrollable={true}
-            >
+                    <span
+                      className=
+                          ms-Button-flexContainer
+                          {
+                            align-items: center;
+                            display: flex;
+                            flex-wrap: nowrap;
+                            height: 100%;
+                            justify-content: center;
+                          }
+                      data-automationid="splitbuttonprimary"
+                    >
+                      <i
+                        aria-hidden={true}
+                        className=
+                            ms-Icon
+                            ms-Button-icon
+                            {
+                              display: inline-block;
+                            }
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              font-family: "FabricMDL2Icons";
+                              font-style: normal;
+                              font-weight: normal;
+                              speak: none;
+                            }
+                            {
+                              flex-shrink: 0;
+                              font-size: 16px;
+                              height: 16px;
+                              line-height: 16px;
+                              margin-bottom: 0;
+                              margin-left: 4px;
+                              margin-right: 4px;
+                              margin-top: 0;
+                              text-align: center;
+                            }
+                        data-icon-name="Cancel"
+                        style={
+                          Object {
+                            "fontFamily": "\\"FabricMDL2Icons\\"",
+                          }
+                        }
+                      >
+                        
+                      </i>
+                    </span>
+                  </button>
+                </div>
+              </div>
               <div
                 className=
                     ms-Panel-content
@@ -560,204 +565,209 @@ exports[`Panel renders Panel correctly 1`] = `
           />
           <div
             className=
-                ms-Panel-commands
+                ms-Panel-contentInner
                 {
-                  margin-top: 18px;
+                  display: flex;
+                  flex-direction: column;
+                  flex-grow: 1;
+                  overflow-y: hidden;
                 }
-            data-is-visible={true}
           >
             <div
               className=
-                  ms-Panel-navigation
+                  ms-Panel-scrollableContent
                   {
-                    display: flex;
-                    justify-content: flex-end;
+                    overflow-y: auto;
                   }
+              data-is-scrollable={true}
             >
               <div
                 className=
-                    ms-Panel-header
-                    {
-                      align-self: flex-start;
-                      flex-grow: 1;
-                      padding-left: 24px;
-                      padding-right: 24px;
-                    }
-              >
-                <div
-                  aria-level={3}
-                  className=
-                      ms-Panel-headerText
-                      panel_class
-                      {
-                        -moz-osx-font-smoothing: grayscale;
-                        -webkit-font-smoothing: antialiased;
-                        color: #323130;
-                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                        font-size: 20px;
-                        font-weight: 600;
-                        hyphens: auto;
-                        line-height: 27px;
-                        overflow-wrap: break-word;
-                        word-break: break-word;
-                        word-wrap: break-word;
-                      }
-                  id="Panel0-headerText"
-                  role="heading"
-                >
-                  Test Panel
-                </div>
-              </div>
-              <button
-                className=
-                    ms-Button
-                    ms-Panel-closeButton
-                    ms-PanelAction-close
-                    ms-Button--icon
+                    ms-Panel-commands
                     {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      background-color: transparent;
-                      border-radius: 2px;
-                      border: none;
-                      box-sizing: border-box;
-                      color: #605e5c;
-                      cursor: pointer;
-                      display: inline-block;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 20px;
-                      font-weight: 400;
-                      height: 32px;
-                      margin-right: 14px;
-                      outline: transparent;
-                      padding-bottom: 0;
-                      padding-left: 4px;
-                      padding-right: 4px;
-                      padding-top: 0;
-                      position: relative;
-                      text-align: center;
-                      text-decoration: none;
-                      user-select: none;
-                      width: 32px;
+                      padding-top: 18px;
                     }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                    .ms-Fabric--isFocusVisible &:focus:after {
-                      border: 1px solid transparent;
-                      bottom: 2px;
-                      content: "";
-                      left: 2px;
-                      outline: 1px solid #605e5c;
-                      position: absolute;
-                      right: 2px;
-                      top: 2px;
-                      z-index: 1;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                      bottom: -2px;
-                      left: -2px;
-                      outline-color: ButtonText;
-                      right: -2px;
-                      top: -2px;
-                    }
-                    &:active > * {
-                      left: 0px;
-                      position: relative;
+                    @media (min-height: 480px){& {
+                      background-color: #ffffff;
+                      position: sticky;
                       top: 0px;
                     }
-                    &:hover {
-                      background-color: #f3f2f1;
-                      color: #323130;
-                    }
-                    @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
-                      border-color: Highlight;
-                      color: Highlight;
-                    }
-                    &:active {
-                      background-color: #edebe9;
-                      color: #005a9e;
-                    }
-                data-is-focusable={true}
                 data-is-visible={true}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyPress={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                type="button"
               >
-                <span
+                <div
                   className=
-                      ms-Button-flexContainer
+                      ms-Panel-navigation
                       {
-                        align-items: center;
                         display: flex;
-                        flex-wrap: nowrap;
-                        height: 100%;
-                        justify-content: center;
+                        justify-content: flex-end;
                       }
-                  data-automationid="splitbuttonprimary"
                 >
-                  <i
-                    aria-hidden={true}
+                  <div
                     className=
-                        ms-Icon
-                        ms-Button-icon
+                        ms-Panel-header
                         {
-                          display: inline-block;
+                          align-self: flex-start;
+                          flex-grow: 1;
+                          padding-left: 24px;
+                          padding-right: 24px;
                         }
+                  >
+                    <div
+                      aria-level={3}
+                      className=
+                          ms-Panel-headerText
+                          panel_class
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 20px;
+                            font-weight: 600;
+                            hyphens: auto;
+                            line-height: 27px;
+                            overflow-wrap: break-word;
+                            word-break: break-word;
+                            word-wrap: break-word;
+                          }
+                      id="Panel0-headerText"
+                      role="heading"
+                    >
+                      Test Panel
+                    </div>
+                  </div>
+                  <button
+                    className=
+                        ms-Button
+                        ms-Panel-closeButton
+                        ms-PanelAction-close
+                        ms-Button--icon
                         {
                           -moz-osx-font-smoothing: grayscale;
                           -webkit-font-smoothing: antialiased;
-                          font-family: "FabricMDL2Icons";
-                          font-style: normal;
-                          font-weight: normal;
-                          speak: none;
-                        }
-                        {
-                          flex-shrink: 0;
-                          font-size: 16px;
-                          height: 16px;
-                          line-height: 16px;
-                          margin-bottom: 0;
-                          margin-left: 4px;
-                          margin-right: 4px;
-                          margin-top: 0;
+                          background-color: transparent;
+                          border-radius: 2px;
+                          border: none;
+                          box-sizing: border-box;
+                          color: #605e5c;
+                          cursor: pointer;
+                          display: inline-block;
+                          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                          font-size: 20px;
+                          font-weight: 400;
+                          height: 32px;
+                          margin-right: 14px;
+                          outline: transparent;
+                          padding-bottom: 0;
+                          padding-left: 4px;
+                          padding-right: 4px;
+                          padding-top: 0;
+                          position: relative;
                           text-align: center;
+                          text-decoration: none;
+                          user-select: none;
+                          width: 32px;
                         }
-                    data-icon-name="Cancel"
-                    style={
-                      Object {
-                        "fontFamily": "\\"FabricMDL2Icons\\"",
-                      }
-                    }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 2px;
+                          content: "";
+                          left: 2px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 2px;
+                          top: 2px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          bottom: -2px;
+                          left: -2px;
+                          outline-color: ButtonText;
+                          right: -2px;
+                          top: -2px;
+                        }
+                        &:active > * {
+                          left: 0px;
+                          position: relative;
+                          top: 0px;
+                        }
+                        &:hover {
+                          background-color: #f3f2f1;
+                          color: #323130;
+                        }
+                        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover {
+                          border-color: Highlight;
+                          color: Highlight;
+                        }
+                        &:active {
+                          background-color: #edebe9;
+                          color: #005a9e;
+                        }
+                    data-is-focusable={true}
+                    data-is-visible={true}
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    onKeyPress={[Function]}
+                    onKeyUp={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseUp={[Function]}
+                    type="button"
                   >
-                    
-                  </i>
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            className=
-                ms-Panel-contentInner
-                {
-                  display: flex;
-                  flex-direction: column;
-                  flex-grow: 1;
-                  overflow-y: hidden;
-                }
-          >
-            <div
-              className=
-                  ms-Panel-scrollableContent
-                  {
-                    overflow-y: auto;
-                  }
-              data-is-scrollable={true}
-            >
+                    <span
+                      className=
+                          ms-Button-flexContainer
+                          {
+                            align-items: center;
+                            display: flex;
+                            flex-wrap: nowrap;
+                            height: 100%;
+                            justify-content: center;
+                          }
+                      data-automationid="splitbuttonprimary"
+                    >
+                      <i
+                        aria-hidden={true}
+                        className=
+                            ms-Icon
+                            ms-Button-icon
+                            {
+                              display: inline-block;
+                            }
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              font-family: "FabricMDL2Icons";
+                              font-style: normal;
+                              font-weight: normal;
+                              speak: none;
+                            }
+                            {
+                              flex-shrink: 0;
+                              font-size: 16px;
+                              height: 16px;
+                              line-height: 16px;
+                              margin-bottom: 0;
+                              margin-left: 4px;
+                              margin-right: 4px;
+                              margin-top: 0;
+                              text-align: center;
+                            }
+                        data-icon-name="Cancel"
+                        style={
+                          Object {
+                            "fontFamily": "\\"FabricMDL2Icons\\"",
+                          }
+                        }
+                      >
+                        
+                      </i>
+                    </span>
+                  </button>
+                </div>
+              </div>
               <div
                 className=
                     ms-Panel-content