Semantic-UI-React "flud "attribute prevents full coverage of button inside of reavel

If I add "fluid" attribute to Semantic-UI buttons inside of the Semantic-UI reveal then reaval doesn't work as expected. Rather than covering the primary button and transitioning to reveal the second button when you hover on the button it only partially barely covers the primary button, if I remove the flud attribute, it covers the button entirely

Here is an example that clearly demonstrates the difference : Codesandbox

I'm not entirely sure the best way to resolve this so any help welcome

Without attribute:
<Reveal animated="move">
  <Reveal.Content visible>
    <Button color="green">Green</Button>
  </Reveal.Content>
  <Reveal.Content hidden>
    <Button color="red">Red</Button>
  </Reveal.Content>
</Reveal>

With fluid attribute:
<Reveal animated="move">
  <Reveal.Content visible>
    <Button fluid color="green">
      Green
    </Button>
  </Reveal.Content>
  <Reveal.Content hidden>
    <Button fluid color="red">
      Red
    </Button>
  </Reveal.Content>
</Reveal>

After some trial and error was able to work out the css, seems the issue was with the float: left,

changed to float: right and added width: 100%;

.ui.move.reveal>.content {
    display: block;
    float: right;
    white-space: normal;
    width: 100%;
    margin: 0;
    transition: transform .5s cubic-bezier(.175,.885,.32,1) .1s;
}

Hope this helps someone someday