Best Layout Pattern for our Design

[GiantRobots]

I've tried making this design a few different ways. essentially a button and button group on the right side of the layout that will not wrap itself (hence the minWidths to prevent wrapping)

I've tried creating this design with Flex and also with Grid (I did that locally and didn't replicate my findings in the codesandbox). Flex has issues when it's too small and we get weird overflows and alignment issues. When I use grid when the design is at 800px it's fine but when it's at 1200px the button group and button take too much space. Adding responsive breakpoints seems to be a solution but it seems worse than what I feel like is a better solution.

Don't hate. But table layout seems to get us our most preferred results. The heading increases in size, the buttons don't grow past the min width and it was easy to implement.

You can see a demo of the approaches below. So I guess I'm wondering what is the recommendation from the Paste team to handle this type of layout correctly? (I'm not the best flexbox user so I could easily be doing something silly and would appreciate some help on the layout)

https://codesandbox.io/s/paste-starter-kit-forked-w1071?file=/src/index.tsx

[GiantRobots]

Both Implementations have an issue with the icon messing up the line spacing on the line they're on as well. Just noticed.

[richbachman]

Hi @GiantRobots

I forked your CodeSandbox and played around with the layout in another example. I left your other examples in place for comparison. I'm just using Box here. Flex can be a little too opinionated sometimes. We need to reevaluate that one.

For the icon alignment, we usually say you can solve that with a line-height, but that doesn't quite work with long headings that wrap lines because that line-height makes the text look cramped. I when with a relatively positioned Box wrapping the PopoverButton.

I also left a comment in the code about the button group needing to be radio inputs instead of actual buttons in order to be accessible.

Have a look and let us know if you have any questions.

https://codesandbox.io/s/discussion-1210-7w94w?file=/src/index.tsx

[GiantRobots]

Thanks for the looksie!

The approach you provided definitely works better than our original flex implementation. It seems to just be using flex properties without the flex components so I'm assuming there was some issue with how they were being laid out? Or is there an issue with the flex component. I'm not gonna lie my entire understanding about flex comes from here https://flexboxfroggy.com/

For the icon alignment, we usually say you can solve that with a line-height, but that doesn't quite work with long headings that wrap lines because that line-height makes the text look cramped. I when with a relatively positioned Box wrapping the PopoverButton.

Basically I read this as, it's an issue for multiline and we're just gonna let it be an issue (I'm cool with it if you are)

I also left a comment in the code about the button group needing to be radio inputs instead of actual buttons in order to be accessible.

We were just going to leave this be until buttonGroup comes out for Paste proper. The Roadmap seems to indicate October 2021 for a release. If we can ask to have that moved up in the timeline it'd be of great use/help to us because it's a very common pattern for SendGrid pages/designs.