Add Flex with breakpoint prop

[joshri]

Closes: #2907

Creates styled component extension of Flex with a breakpoint prop to swap flex-direction when below a certain screen width

laggy video here:

resposive-large-info.mov

[TheGostKasper]

I think we don't need to add the breakpoint as we can make use of the flex-wrap & between for Flex

   <Flex wide between wrap  gap="8">
        <SyncActions
          name={name}
          ...
        />
        <Flex gap="14">
          {automation?.type === "HelmRelease" ? (
            ...
          <LargeInfo
           ... />}
          />
        </Flex>
      </Flex>

redirect3-2023-08-18_13.23.27.mp4

[jpellizzari]

I like the creatrivity, but I would also like to see if @TheGostKasper 's suggestion would work here if possible.

[jpellizzari]

I dig this 👍

[joshri]

We'd lose the conditional top padding, which prevents this weird spacing:

But also...I might be losing my mind, but when I add the wrap prop nothing happens...I have my code in the screenshot to prove I added the prop haha

[TheGostKasper]

Flex gap controls space in between, you can adjust the right gap. and by adding wrap sets whether flex items are forced onto one line or can wrap onto multiple lines.

This record without setting a gap value.

[joshri]

@TheGostKasper Any ideas on why the wrap prop isn't working in my code in the right half of my screenshot?

[TheGostKasper]

I believe it's because there's no overlap in width as the Flex Row still show both div without any problems.

[joshri]

But the div on the right is clearly off the screen? What am I missing?

[joshri]

There was an important diff between EE and OSS here - OSS added a special component for the sync and suspend buttons a couple weeks ago that is now set to 50% width by default, allowing for the large info flex to now wrap when it runs up against it. Thanks @TheGostKasper for testing