docs: fix EditableText and EditableHeading overflowing in the catalog

[talkor]

In the Catalog there are interactive examples of components.

The EditableText and EditableHeading examples are overflowing. See screenshots:

Need to make them stretch, for example like the Heading:

Related files

packages/core/src/storybook/components/related-components/descriptions/editable-text-description.tsx packages/core/src/storybook/components/related-components/descriptions/editable-heading-description.jsx

---

Monday ticket [internal]

[moonlander101]

Hello, I would like to work on this

[tamirazrab]

Hi, I tried it, removing max-width: 100%; inside editableTypography , my guess is it only allows the width of actual text there is, it got expanded but I'm not confident whether it's the right solution. Is there better approach to it?

Reference: packages/core/src/components/EditableTypography/EditableTypography.module.scss

[talkor]

Hi, I tried it, removing max-width: 100%; inside editableTypography , my guess is it only allows the width of actual text there is, it got expanded but I'm not confident whether it's the right solution. Is there better approach to it?

Reference: packages/core/src/components/EditableTypography/EditableTypography.module.scss

Hi @tamirazrab , thanks for looking into it! No need to change the component itself, but probably in the description component listed in the issue description. I believe it's due to the flex container which can be converted to a block

[mashazyu]

@talkor ,

If this issue is still available for grabs, I'd like to look into it.

[talkor]

@talkor ,

If this issue is still available for grabs, I'd like to look into it.

Sure @mashazyu, that would be great, thank you!