Tiptap: horizontal overflow in toolbar not usable #3183

Initial Checklist

• I understand this is a bug report and questions should be posted in the Community Discussions
• I searched issues and couldn’t find anything (or linked relevant results below)

Bug Description

When the browser window is not wide enough for all tiptap toolbar elements that we have, the editor toolbar currently becomes horizontally scrollable. This has two issues:

1. for users with a mouse that doesn't support horizontal scrolling this is not (easily) usable
2. although we have a shadow on the overflowing end, it is not that easily noticeable that the toolbar needs to be scrolled to get to the toolbar items which are currently out of reach.

Reproduction Steps

1. Have a browser window with e.g. ~650px width
2. Open a .md or .ocnote file

Expected Outcome

All toolbar items can be reached without thinking too hard how to get there

Actual Outcome

Overflowing toolbar items seem to not exist

Idea how to solve

We could collapse the overflowing toolbar items into a three-dots-button which only appears if there's not enough horizontal space. This would have another nice effect: when we have connection status and editor avatars for collaborative editing, we could keep those always visible on the very right and only collapse the toolbar items for interacting with the content into the three-dots-button.