Fixed action preview header on the top

[jhen0409]

Currently we cannot set correctly height: 100% to custom tab content height:

Set flex: 1 to actionPreview style will succeed:

[jhen0409]

I'm changed this PR, just use flex layout to fixed action preview header on the top:

/cc @zalmoxisus

[alexkuz]

how about flex: 0 0 40px instead of min-height and flex-basis?

[jhen0409]

Ah, that will be better. it's done, I also removed margin-bottom of tabSelector.

[zalmoxisus]

What's the reason of increasing the height? I'm getting an unexpected extra space with that:

Which is fixed by changing to

-flex: '0 0 40px',
+flex: '0 0 30px',

[jhen0409]

@zalmoxisus because I used min-height and flex-basis before, 30px will get unexpected result, but we should keep 30px for change to flex: '0 0 px', it's my fault, I'll update it.

[zalmoxisus]

I might be missing something, but using this patch and adding

  <div style={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
+    height: '100%',
+    backgroundColor: '#ccc',
    minHeight: '20rem'
  }}>

to the demo, I'm getting the same issue in the first case as reported:

[jhen0409]

@zalmoxisus, I missing add flex: 1 to actionPreview, it should work for now.

[zalmoxisus]

@jhen0409, it did the trick, thanks! Not sure you noticed also my comment on the outdated diff.

[jhen0409]

@alexkuz @zalmoxisus any update on this? :)

[alexkuz]

@jhen0409 I'll try to take a closer look on this (and other stuff I'm shamelessly ignoring lately) this or next weekend. Sorry for making you wait!