Toolbar is collapsed when the container size is changed, but the toolbar is not collapsed when the browser size is changed.

[developergunny]

Describe the bug

Used in drawer, the size does not change. Can a simple css fix solve this problem? thank you.

Screenshots

https://user-images.githubusercontent.com/67149898/170457886-e9c02f74-88cc-4ce2-ad04-649f6ab709ee.mp4

Expected behavior

When the browser size is reduced, a "more" button on the toolbar should appear and the width should decrease.

Desktop (please complete the following information):

• OS: mac
• Browser: chrome
• @toast-ui/react-editor v3.1.7

[jajugoguma]

@developergunny Are you experiencing the same problem in your development environment? The same problem does not occur in my development environment, it seems that the problem only occurs in the example page.

[developergunny]

@developergunny Are you experiencing the same problem in your development environment? The same problem does not occur in my development environment, it seems that the problem only occurs in the example page.

@jajugoguma Yes, the problem also arises in the development environment. When rendering the toast editor in the Drawer, the size of the editor no longer shrinks below a certain size, causing some issues with responsive web implementations.

Here screenshot. https://user-images.githubusercontent.com/67149898/172552014-378047c2-8b24-4770-baa3-d22d649f1fc9.mp4

[MuhammadMabrouk]

Any updates on this?

[developergunny]

@MuhammadMabrouk

There are no updates on that.

Please reply if you have any update plans.

[MuhammadMabrouk]

@developergunny I solved it by adding width: 100%; to the container

[developergunny]

@MuhammadMabrouk

Thank you for answer.

But even I add "width: 100%" to the container and it's the same.

So I decided not to support the toast editor on mobile until it is resolved.

[whether-ej]

The same problem occured, and adding this worked for me

.toastui-editor-defaultUI-toolbar {
  flex-wrap: wrap;
}

[developergunny]

같은 문제가 발생했고 이것을 추가하면 나에게 도움이되었습니다.

.toastui-editor-defaultUI-toolbar {
  flex-wrap: wrap;
}

This is a good solution, but it throws an error when the resize event fires.

ResizeObserver loop completed with undelivered notifications.
    at handleError (http://localhost:3000/static/js/bundle.js:202941:58)
    at http://localhost:3000/static/js/bundle.js:202960:7