Fix various flyout width issues

- fix responsive flyout behavior by removing `max-width: none` from inline styles (was overriding max-width 90vw CSS media query)
- add noMaxWidth Emotion class instead, which can be overridden by said media query

- revert m sized flyouts to `424px` wide min widths
- fix max-width for m sized flyouts missing a `px` unit
- remove unnecessary `Math.round` from l.max

- update inline custom max-width/width styles to use logical properties

src/components/flyout/flyout.styles.ts

@@ -17,6 +17,7 @@ import {
 import { UseEuiTheme } from '../../services';
 import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
 import { transparentize } from '../../services/color';
+import { euiFormMaxWidth } from '../form/form.styles';
 
 const euiFlyoutSlideInRight = keyframes`
   0% {
@@ -117,6 +118,9 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
     l: css`
       ${composeFlyoutSizing(euiThemeContext, 'l')}
     `,
+    noMaxWidth: css`
+      ${logicalCSS('max-width', 'none')}
+    `,
 
     // Side
     right: css`
@@ -185,15 +189,16 @@ const composeFlyoutSizing = (
     },
 
     m: {
-      min: `${euiTheme.breakpoint.m * 0.8}px`,
+      // Calculated for forms plus padding
+      min: `${mathWithUnits(euiFormMaxWidth(euiThemeContext), (x) => x + 24)}`,
       width: '50vw',
-      max: euiTheme.breakpoint.m,
+      max: `${euiTheme.breakpoint.m}px`,
     },
 
     l: {
       min: `${Math.round(euiTheme.breakpoint.m * 0.9)}px`,
       width: '75vw',
-      max: `${Math.round(euiTheme.breakpoint.l)}px`,
+      max: `${euiTheme.breakpoint.l}px`,
     },
   };
 

src/components/flyout/flyout.tsx

@@ -29,6 +29,7 @@ import {
   useIsWithinMinBreakpoint,
   useEuiTheme,
 } from '../../services';
+import { logicalStyle } from '../../global_styling';
 
 import { CommonProps, PropsOfElement } from '../common';
 import { EuiFocusTrap, EuiFocusTrapProps } from '../focus_trap';
@@ -244,13 +245,13 @@ export const EuiFlyout = forwardRef(
 
     let newStyle;
 
-    if (maxWidth !== true) {
-      newStyle = { ...style, maxWidth: maxWidth === false ? 'none' : maxWidth };
+    if (typeof maxWidth !== 'boolean') {
+      newStyle = { ...style, ...logicalStyle('max-width', maxWidth) };
     }
 
     // Setting size
     if (!isEuiFlyoutSizeNamed(size)) {
-      newStyle = { ...(newStyle || style), width: size };
+      newStyle = { ...(newStyle || style), ...logicalStyle('width', size) };
     }
 
     const euiTheme = useEuiTheme();
@@ -260,6 +261,7 @@ export const EuiFlyout = forwardRef(
       styles.euiFlyout,
       styles.paddingSizes[paddingSize],
       isEuiFlyoutSizeNamed(size) && styles[size],
+      maxWidth === false && styles.noMaxWidth,
       styles[type],
       type === 'push' && styles.pushSide[side],
       styles[side],