Hi everyone,
I'm trying to write a Tampermonkey script to force the Google Docs toolbar to display all its options in two or more lines instead of hiding them behind the "three dots" (kebab menu / #docs-toolbar-more).
Even on large screens, Google Docs hides essential tools like "Line spacing", "Background color", or "Table options" if the window isn't maximized.
What I've tried so far: Applying flex-wrap: wrap !important and height: auto !important to .docs-main-toolbars and #docs-toolbar-wrapper. Using a MutationObserver to detect when Google's internal scripts apply display: none or visibility: hidden to the toolbar items (.goog-toolbar-item), and forcing them back to display: inline-block !important. Adjusting the #docs-editor-container top margin so the second line of the toolbar doesn't overlap with the document.
Google's obfuscated scripts seem to recalculate the layout constantly. Even when I force the buttons to be "visible", they often appear empty, lose their functionality, or Google's script immediately moves them into the overflow hidden container. It seems like Google isn't just hiding them, but actually managing their state in a way that breaks when forced.
Does anyone have a working snippet or a strategy to bypass Google's layout engine for the toolbars? Specifically, how can I stop the "More" button logic from triggering and just let the flexbox wrap the items naturally? The main container class seems to be .goog-toolbar.docs-main-toolbars.
Thanks in advance for any help!