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
microsoft · Aug 31, 2021 · cb45155 · cb45155
1 parent abed5eb
commit cb45155
Show file tree

Hide file tree

Showing 4 changed files with 373 additions and 343 deletions.
diff --git a/change/@fluentui-react-6112fdea-f8c4-4731-90f1-466f69c0e659.json 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
@@ -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
@@ -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,