Large Toolbar on Mobile when using buttons with text (with solution)

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• I have read the documentation and cannot find an answer.

Describe the bug

NOTE that I mostly just wanted to make this issue in case someone has the same problem I had and to document how I solved it. For the MDXEditor devs, there might be a couple pieces of CSS you might want to consider adding

I noticed the toolbar on mobile took up a large portion of the screen and has a horizontal scroll on mobile. See:

And scrolled over a bit:

Now, obviously the problem here is my BigNavMenu button has its text getting wrapped, which is what's causing the Navbar to appear so big.

Solution 1: Add min-width: fit-content; to the button, either inline or via className. This will however keep the horizontal scroll of the navbar

Solution 2: Add the following css:

.mdxeditor-toolbar {
                flex-wrap: wrap;
}

Or add flex-wrap class to toolbarClassName (tailwind).
This will make the toolbar look like this:

Personally, I like this a lot more.

Reproduction

Here are the relevant pieces of code:

Here is the button that follows the official example here. The important part is that its children is text.

const InsertBigNavMenu = () => {
  const insertJsx = usePublisher(insertJsx$)
  return (
    <Button
      onClick={() =>
        insertJsx({
          name: "BigNavMenu",
          kind: "flow",
          props: {
            id: "big-nav-menu",
            navItems: {
              type: "expression",
              value: '...'
            },
          },
        })
      }
    >
      BigNavMenu
    </Button>
  )
}

And here is my MDXEditor with all of its plugins

<MDXEditor
            markdown={initialBodyForEdit}
            plugins={[
              headingsPlugin(),
              listsPlugin(),
              quotePlugin(),
              thematicBreakPlugin(),
              linkPlugin(),
              linkDialogPlugin({
                linkAutocompleteSuggestions: [
                  "TODO",
                ],
              }),
              imagePlugin({
                imageUploadHandler: () => {
                  return Promise.resolve("https://picsum.photos/200/300")
                },
                imageAutocompleteSuggestions: ["https://picsum.photos/200/300", "https://picsum.photos/200"],
              }),
              tablePlugin(),
              jsxPlugin({ jsxComponentDescriptors }),
              diffSourcePlugin({ diffMarkdown: initialBodyForEdit, viewMode: "rich-text" }),
              toolbarPlugin({
                toolbarClassName: "toolbar-classname", // can put `flex-wrap` here
                toolbarContents: () => (
                  <DiffSourceToggleWrapper>
                    <UndoRedo />
                    <BoldItalicUnderlineToggles />
                    <ListsToggle />
                    <BlockTypeSelect />
                    <InsertImageCustom />
                    <InsertTable />
                    <InsertThematicBreak />
                    <CreateLink />
                    <InsertBigNavMenu /> // problematic Button here.
                  </DiffSourceToggleWrapper>
                ),
              }),
            ]}
          />

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome, using Chrome Dev Tools to simulate a mobile environment by shrinking the window

Start with the toolbarPlugin configuration and the custom Button shown in the reproduction, then reproduce the mobile layout with a text label such as BigNavMenu. Compare the existing toolbar behavior with the proposed min-width and flex-wrap options; done means the intended mobile layout is established without unwanted text wrapping or horizontal overflow.