What ⚡

Move the table of contents for a document from the left side to the right side in OutlineWiki (getoutline.com)

Why 🤷‍♂️

Short version

I am in the habit of seeing the table of contents for a page on the right side of the content which makes jumping into a situation where this information is on the left side discombobulating/disruptive.

Longer version

Right side table of content placement seems to be the standard across most apps that attempt to wrangle text-based information for personal or team sharing.

Popular static builders (e.g. MKDocs and Docusaurus) and database-powered docs apps and many database powered apps default to ride side placement (Clickup) and many allow users to choose which side they prefer (Wiki.js).[1]

Personally, I use Obsidian as much as possible for writing and organizing ideas and notes and my config uses a table of contents to the right of my pages. Obsidian Publish also reinforces this design choice.

Despite how cool Outline is as a team knowledge sharing hub, I basically stopped using it because of this one design limitation until I reinvestigated and saw how simple it would be override this with CSS and JS.

How 📋

Actually really simple. Just use a browser extension that allows for CSS and JS insertion and set them to insert the below code when using Outline. I use User JavaScript and CSS and it works well but there are many like this.

CSS

Because the developer is using flexbox it’s simple to switch column order.

/* Full width **/

.eSMets {
    flex-direction: row !important; 

}

/* Normal width **/
.dyKbFK {
    display: block !important;
}	

@media (min-width: 100em) {
    .lcznko {
        transform: translateX(-5px) !important;
        xwidth: 0px;
    }
}

JS (Optional)

If you just want to see the table of contents area for all pages and not have to click to view it you can use some JS to click the view button automatically each time you load a page.

// JavaScript to click the button on page load
document.addEventListener('DOMContentLoaded', function() {
    // Find the button by class name
    const button = document.querySelector('.sc-1vta7fu-0');
    // Check if the button exists
    if (button) {
        // Simulate a click on the button
        button.click();
    }
});

Forcing it on your team

If you self host Outline you could insert this code directly so all your team members see this same view by default.

The hard way to do this is probably to try to fork Outline and try to modify the code there so you have your own build. The next less hard but still annoying way is to insert the code globally for all users using a proxy server. Cloudflare is basically a big proxy and had this cool marketplace which allowed users to perform operations on top of their apps like this (Add CSS) but it looks like they are sunsetting this offering so you’d have to come up with an alternate or build your own proxy, which feels very annoying for this little thing.

Best thing is probably just to tell your team about this option and have them use a browser extension if they dig this option.

Before and After

Mobile view preserved

Does not seem to damage nice mobile view

Footnotes

[1]: Wikipedia is a major exception with a strong left sidebar table of contents but these pages from Wikipedia are so freaking long it feels like this sidebar is almost guiding users to unique pages? GoogleDocs is also a major exception as it now generates a nice table of contents and positions it to the left of the content.