Fix management footer logo spacing bug

[flash1293]

Summary

Fixes #22222

This PR fixes the problem of the above issue by setting a fixed value to the height of the preview image.

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
  - [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
  - [ ] Documentation was added for features that require explanation or tutorials
  - [ ] Unit or functional tests were updated or added to match the most common scenarios
  - [ ] This was checked for keyboard-only and screenreader accessibility

For maintainers

- [ ] This was checked for breaking API changes and was labeled appropriately
- [ ] This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

Pinging @elastic/kibana-app

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[cchaos]

The problem in IE is not the size of the image but the number of child flex boxes. It would be nice to fix this at the flex-box level instead of forcing sizing on the image.

To fix this at the flex level you just need to add min-height: 1px to the .mgtAdvancedSettings__field and to the EuiFormRow (will need a custom className as well).

You could also add the size prop to EuiImage so that it doesn't get to large. I tried it with size="m" and it looked pretty good.

[cchaos]

Oh and since these are IE specific fixes, you could wrap them in the EUI SASS helper like:

@include internetExplorerOnly {
  min-height: 1px;
}

Or at least add a comment to the line that it's fixing IE.

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[flash1293]

@cchaos Ah, I tried that as lined out here philipwalton/flexbugs#75 but I missed the fact I had to apply it to all flex layers, not just the last one. Thanks a lot, will fix it tomorrow.

Regarding the image size - wouldn't it still look strange if the user provided an image with a large height and a small width? By setting both max-width and max-height it is made sure that the image is always displayed as a small preview thumb.

[cchaos]

Great thanks!

wouldn't it still look strange if the user provided an image with a large height and a small width

That might be something we want to address on the EUI side, since, yes it could be odd that we're only maxing the width:

But for this particular case, since it's for the footer of a PDF, if they upload something that's very tall it will probably take up more space on the page than they're expecting so I like that it enhances showing the height vs width of the image.

[flash1293]

Opened issue in EUI (elastic/eui#1554) and added min-height.

But for this particular case, since it's for the footer of a PDF, if they upload something that's very tall it will probably take up more space on the page than they're expecting so I like that it enhances showing the height vs width of the image.

For the moment it's the only image in settings but there might be others in the future so I'm not sure whether we should look too much on the ordinary aspect ratios of this image. Maybe 100px is too little to make something like this stand out, what about 400px?

Without height restriction:

With height restriction 400px:

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[flash1293]

Jenkins, test this. Flaky test?

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[cchaos]

Great, ty!

[flash1293]

Retest

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request