Outline / Table of contents improvements

[mejo-]

Describe the bug
There's many issues and complaints about how the outline / table of contents feature currently works:

• The feature is hard to discover: better position for outline toggle button #6876
• On small screen, it overflows the text content and is barley readable: Outline / table of contents overflow into notes field #7522, Outline placed over the text body when using full width option collectives#1715, ability to hide pages list (left sidebar) collectives#667
• We currently use display: grid for the Text editor .content-wrapper container and its left and right siblings just to have a container for the outline. This leads to all kinds of problems with printing the document (see printing to pdf: lines cut off at page break #7553) and full width view of documents that contain a table (Markdown table will breake the whole design, if wide-text is enabled and you make the table wide enough to have a scroll bar #7228).

Expected behavior
It should be easy to toggle the table of contents. We should have a good design concept of where and how to display it, both on wide screens with much whitespace left and right to the editor, and on narrow screens without any extra horizontal whitespace.

Screenshots

See linked issues.

Cc @marcoambrosini @nextcloud/designers