Adjust layout to waste less space with page icons and covers (Tampermonkey)

notion_compact.user.js

// ==UserScript==
// @name        Notion Compact Page Icons, Covers and Bulletpoints
// @namespace   http://tampermonkey.net/
// @version     1.11
// @description Adjust layout to waste less space with page icons and covers and reduce vertical spacing between blocks
// @author      Dmitrij Drandarov
// @match       https://www.notion.so/*
// @grant       none
// @homepage    https://gist.github.com/drandarov-io/51f0febb344539c979e9677e91b73d26
// ==/UserScript==

(() => {
    'use strict';

    const injectCSS = () => {
        const style = document.createElement('style');
        style.innerHTML = `
            .notion-page-block h1 { margin-top: -0.8vh !important; }
            .notion-page-controls { margin-top: -0.1vh !important; }
            .notion-page-content { margin-top: -0.4vh !important; }
            .notion-column-block { margin-top: -0.5vh !important; }
            /*.notion-column_list-block { margin-top: -1vh !important; }*/

            .notion-bulleted_list-block { margin-bottom: 1px !important; margin-top: -5px !important; }
            .notion-bulleted_list-block > div[role="button"][aria-label="Drag"] { margin-top: 5px !important; }

            .notion-code-block.line-numbers > div { padding: 25px 16px 18px 24px !important; }

            .notion-header-block { margin-top: 0.6em !important; }
            .notion-header-block > div[role="button"][aria-label="Drag"] { margin-top: -1em !important; }
            .notion-sub_header-block { margin-top: 0.4em !important; margin-bottom: 0.5em !important;  }
            .notion-sub_header-block > div[role="button"][aria-label="Drag"] { margin-top: -0.4em !important; }
            .notion-sub_sub_header-block { margin-top: 0.25em !important; margin-bottom: 0.2em !important; }
            .notion-sub_sub_header-block > div[role="button"][aria-label="Drag"] { margin-top: -0.25em !important; }

            .notion-sidebar > div > div > div > a > div { min-height: 25px !important; height: 25px !important; }
            .notion-sidebar > div > div > div > div > div { min-height: 25px !important; height: 25px !important; }

            div[role="tree"] > div > div > div > a > div { margin-bottom: -2px !important; margin-top: -2px !important; }
            div[role="tree"] div[role="group"] > div > div > div > a > div { padding: 0px 8px 0px 25px !important; margin-bottom: -3px !important; margin-top: -3px !important; }
            div[role="tree"] div[role="group"] div[role="group"] > div > div > div > a > div { padding: 0px 8px 0px 35px !important; margin-bottom: -3px !important; margin-top: -3px !important; }
            div[role="tree"] div[role="group"] div[role="group"] div[role="group"] > div > div > div > a > div { padding: 0px 8px 0px 45px !important; margin-bottom: -3px !important; margin-top: -3px !important; }
        `;
        document.head.appendChild(style);
    };

    const adjustLayout = () => {

        document.querySelectorAll('.layout, .layout-wide').forEach(el => {
            let topMarginSize = '0vh';

            const coverElement = document.querySelector('img[src*="/images/page-cover/"][style*="object-fit: cover"], img[src*="https://images.unsplash.com/"][style*="object-fit: cover"]');
            const coverChanger = document.querySelector('div[style*="position: absolute;"][style*="right: 8px;"][style*="bottom:"]');

            const layoutContent = el.querySelector('.layout-content');
            const iconElement = layoutContent.querySelector('.notion-record-icon:not(.notion-selectable)')

            if (coverElement && iconElement) {
                topMarginSize = '-6vh';
                /*console.log('cover & icon');*/

            } else if (coverElement) {
                topMarginSize = '-6vh';
                /*console.log('cover');*/

            } else if (iconElement) {
                topMarginSize = '-3vh';
                /*console.log('icon');*/

            } else {
                /*console.log('no conver & no icon');*/
            }

            if (layoutContent
                && !el.classList.contains('layout-side-peek')
                && !el.classList.contains('layout-center-peek')
                && !el.classList.contains('layout-home')) {

                el.style.marginTop = topMarginSize;

                if (coverChanger) coverChanger.style.bottom = topMarginSize;
            }

        });
    };

    const startObserving = () => {
        const target = document.querySelector('#notion-app');
        if (!target) return;

        const observer = new MutationObserver(mutations => {
            if (mutations.some(mutation =>
                               mutation.type === 'childList' ||
                               (mutation.type === 'attributes' && mutation.attributeName !== 'style') &&
                               !mutation.target.closest('.notion-selectable-hover-menu-item')
                              )) {
                adjustLayout();
            }
        });

        observer.observe(target, { childList: true, subtree: true, attributes: true });
        window.notionLayoutObserver = observer;
    };

    const stopObserving = () => {
        if (window.notionLayoutObserver) {
            window.notionLayoutObserver.disconnect();
            delete window.notionLayoutObserver;
        }
    };

    injectCSS();
    adjustLayout();
    startObserving();

    document.addEventListener('visibilitychange', () => {
        document.hidden ? stopObserving() : (adjustLayout(), startObserving());
    });
})();