Attempting to fix with EuiFlyout maxWidth

[cchaos]

Fixes #2134 (kind of)

Really all I did was change the docs example to a) not be wrong, b) showcase all the permutations to show what works and what doesn't.

But I also:

1. Rounded the SASS calculations so they don't come out as decimal points
2. Reduced the min width of the medium size so that it just fits our form width
3. Fixed the small flyout sizing on mobile

Checklist

• This was checked in mobile
• This was checked in IE11
• [ ] This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• [ ] This was checked for breaking changes and labeled appropriately
• [ ] Jest tests were updated or added to match the most common scenarios
• [ ] This was checked against keyboard-only and screenreader scenarios
• [ ] This required updates to Framer X components

[thompsongl]

Does anyone have any thoughts or other experiments to try?

The only thing I can think of is to get more JS involved :ducks:
We'd need to do some math on the min and custom max values provided to make sense of which is more accurate.
We already use a style tag with a prop value, so we're part of the way there

eui/src/components/flyout/flyout.js

Lines 46 to 47 in ca58f3d

	const value = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
	newStyle = { ...style, maxWidth: value };

I'm not convinced this is a good idea yet

[chandlerprall]

I think, generally, the current functionality is better (minWidth wining); A flyout's content should be important enough to demand the greater screen real estate.

That said, I'm sure there are valid use cases for restricting the width smaller than the minWidth, but I feel that should be an opt-in case - perhaps we provide a prop that sets min-width back to auto?

[snide]

@cchaos I'm OK with minwidth winning as well. It might be unexpected, but it's generally going to be "more right most of the time".

If we felt extremely strong about it, we could just add a size="custom" or size="fluid' that also requires maxWidth to be set

[cchaos]

Ok, I updated the summary of the PR to align with the actual changes in this PR. (Moved the original summary to an issue for tracking).

[chandlerprall]

Code & docs changes LGTM

[snide]

LGTM. Small suggestion for your 404 change.