[Bug] Callout with icon does not provide left padding as shown on example page

[will-stone]

Bug report

• Package version(s): 2.1.1
• Browser and OS versions: Chrome/Firefox, MacOS 10.12

Steps to reproduce

1. Create a Callout with intent, e.g.

<Callout intent="success" title="test">Testing testing testing</Callout>

Actual behavior

Expected behavior

[giladgray]

@will-stone this does not repro on the docs site which suggests that your app styling is interfering. the .pt-callout-icon should have float: left; height: 100%; so it occupies the entire left side.

[will-stone]

@giladgray How have you got it working?

I've created a CodeSandbox that demonstrates the issue I'm having: https://codesandbox.io/s/qklq5q0j09 is there something I'm doing incorrectly?

[llorca]

I looked at it, it's pretty weird. In the code sandbox, the height: 100% and float: left are indeed present, but they no effect, and there doesn't seem to be any conflicting styles 🤔

[giladgray]

yuck. so throwing display: flex on the parent of .pt-callout fixes the icon layout. not sure how that works, as the icon is one level deeper. seems these styles never worked properly outside the docs environment 😢