Correct bug where DialogHeader & DialogFooter shrink in Safari (#1552)

Author: Luke Bowerman

CHANGELOG.md

@@ -45,6 +45,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - `ComboboxMulti` issue with chips not updating reflecting updated option labels
+- `DialogFooter` & `DialogHeader` will no longer shrink in Safari when vertical space is limited
 - `InputTimeSelect` disabled state
 
 ### Removed

packages/components/src/Dialog/Layout/DialogFooter.tsx

@@ -51,7 +51,9 @@ export const DialogFooterLayout: FC<DialogFooterProps> = ({
   )
 }
 
-export const DialogFooter = styled(DialogFooterLayout)``
+export const DialogFooter = styled(DialogFooterLayout)`
+  flex-shrink: 0;
+`
 
 DialogFooter.defaultProps = {
   px: 'xlarge',

packages/components/src/Dialog/Layout/DialogHeader.tsx

@@ -116,6 +116,7 @@ export const DialogHeader = styled(DialogHeaderLayout)`
   ${space}
   align-items: center;
   display: flex;
+  flex-shrink: 0;
 `
 
 DialogHeader.defaultProps = {

packages/components/src/Dialog/Layout/__snapshots__/DialogFooter.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`DialogFooter with Button 1`] = `
   justify-content: space-between;
 }
 
-.c1 {
+.c2 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   width: 100%;
   -webkit-align-items: center;
@@ -41,38 +41,44 @@ exports[`DialogFooter with Button 1`] = `
   flex-direction: row-reverse;
 }
 
+.c1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 @supports (-moz-appearance:none) {
-  .c1 {
+  .c2 {
     gap: 0 1rem;
   }
 }
 
 @supports not (-moz-appearance:none) {
-  .c1.c1 > * {
+  .c2.c2 > * {
     margin-right: 1rem;
   }
 
-  .c1.c1 > *:first-child {
+  .c2.c2 > *:first-child {
     margin-right: 0rem;
   }
 }
 
 @media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
-  .c1.c1 > * {
+  .c2.c2 > * {
     margin-right: 1rem;
   }
 
-  .c1.c1 > *:first-child {
+  .c2.c2 > *:first-child {
     margin-right: 0rem;
   }
 }
 
 <footer
-  className="c0 "
+  className="c0 c1"
   width="100%"
 >
   <div
-    className="c1"
+    className="c2"
     width="100%"
   >
     <button>
@@ -107,7 +113,7 @@ exports[`DialogFooter with DialogContext 1`] = `
   justify-content: space-between;
 }
 
-.c1 {
+.c2 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   width: 100%;
   -webkit-align-items: center;
@@ -123,38 +129,44 @@ exports[`DialogFooter with DialogContext 1`] = `
   flex-direction: row-reverse;
 }
 
+.c1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
 @supports (-moz-appearance:none) {
-  .c1 {
+  .c2 {
     gap: 0 1rem;
   }
 }
 
 @supports not (-moz-appearance:none) {
-  .c1.c1 > * {
+  .c2.c2 > * {
     margin-right: 1rem;
   }
 
-  .c1.c1 > *:first-child {
+  .c2.c2 > *:first-child {
     margin-right: 0rem;
   }
 }
 
 @media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
-  .c1.c1 > * {
+  .c2.c2 > * {
     margin-right: 1rem;
   }
 
-  .c1.c1 > *:first-child {
+  .c2.c2 > *:first-child {
     margin-right: 0rem;
   }
 }
 
 <footer
-  className="c0 "
+  className="c0 c1"
   width="100%"
 >
   <div
-    className="c1"
+    className="c2"
     width="100%"
   >
     <button

packages/components/src/Dialog/Layout/__snapshots__/DialogHeader.test.tsx.snap

@@ -124,6 +124,9 @@ exports[`DialogHeader Snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 <header