Wider modal width

[vankhoawin]

Hello team, to create a portable Search and Buy experience (based on the previous discussions #1216 and #1171), this Search and Buy modal can handle searching as well as the complex number provisioning flow in one place. however, putting the "Search" experience in a modal is limited by the maximum possible modal widths currently available. Is it (or should it) be possible to add a wider width? cc @lgalloherran

PS ping me if you want a Storybook link

[SiTaggart]

Hi @vnguyen94

So you're using the wide variant now in that mock up? That's certainly a heavy amount of information but my worry is how wide does it need to be?

I don't think we should go beyond 1024px due to laptop screens and such like, but I don't know if that would actually help.

Some of those columns widths do look a little strange, is that just the browser trying to calculate them for you based on content?

For example that Buy action column looks pretty wide. Is there something also happening to the width of the buy button? It's much bigger than it should be. Looks like Fax is breaking a line too, which shouldn't be happening. Maybe a link to the storybook would be useful

[vankhoawin]

So you're using the wide variant now in that mock up? That's certainly a heavy amount of information but my worry is how wide does it need to be?

correct, and if anything i can add a conditional prop to the table to remove displaying non-esssential columns e.g. "Address Requirements" if we need to remove more content.

I don't think we should go beyond 1024px due to laptop screens and such like, but I don't know if that would actually help.

is "wide" fixed to 1024px? i would've thought it was limited by a percentage or something like that

Some of those columns widths do look a little strange, is that just the browser trying to calculate them for you based on content?

Correct, it's a table with fixed percentage columns

Maybe a link to the storybook would be useful

sent

[SiTaggart]

So I think for that table layout you are probably after something more like this: https://codesandbox.io/s/double-headers-n2luo?file=/src/index.tsx

It's not perfectly going to fit into that small of a space but I think it collapses better.

[vankhoawin]

that works, and you're right it does collapse better. it makes the table horizontally scrollable, but i'm fine with that for smaller viewports.

[SiTaggart]

Cool, in the meantime we'll discuss making the wide modal maybe slightly wider to help these situations out more.