Disclosure heading overflow

[PabloFNK]

Hi everyone,

I am using the Disclosure component and I have a business case in which the header comes needs to display two informations:

• A text coming from the network (database)
• A number also coming from the networks.

So I was expecting to display them with flex and add to the text a truncate (overflow with ellipsis). However the text is overflowing the Disclosure header and a max width 100% is not helping.

Do you know how I should address this scenario? I add a codesandbox with an example: https://codesandbox.io/s/paste-dialog-overflow-issue-hb2z7?file=/src/index.tsx

Changing the width from 100% to something specific on pixels works but that would mean that if the parent width changes the implementation is not right.

I have also tried with a more simple scenario with just the text and truncate, not working neither, but I wanted to provide this more advanced one as this is the one I need.

Thank you!

[serifluous]

Hey @PabloFNK, we've got a PR up for a fix on this: #1332

Thanks for bringing this to our attention!