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

notion_compact.user.js

// ==UserScript==
// @name         Notion Compact Page Icons and Covers
// @namespace    http://tampermonkey.net/
// @version      1.7
// @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
// @url          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: -1.2vh !important; }
            .notion-page-controls { margin-top: -0.4vh !important; }
            .notion-page-content { margin-top: -0.4vh !important; }
            .notion-column-block { margin-top: -1vh !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: 1em !important; }
            .notion-header-block > div[role="button"][aria-label="Drag"] { margin-top: -1em !important; }
            .notion-sub_header-block { margin-top: 0.4em !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; }
            .notion-sub_sub_header-block > div[role="button"][aria-label="Drag"] { margin-top: -0.25em !important; }
        `;
        document.head.appendChild(style);
    };

    const adjustLayout = () => {
        const imageElement = document.querySelector('img[src*="/images/page-cover/"][style*="object-fit: cover"], img[src*="https://images.unsplash.com/"][style*="object-fit: cover"]');
        const topMarginSize = imageElement ? '-20vh' : '-6vh';

        document.querySelectorAll('.layout, .layout-wide').forEach(el => {
            if (!el.classList.contains('layout-side-peek') && !el.classList.contains('layout-center-peek') && !el.classList.contains('layout-home')) {
                const layoutContent = el.querySelector('.layout-content');
                if (layoutContent && layoutContent.querySelector('.notion-record-icon:not(.notion-selectable)')) {
                    el.style.marginTop = topMarginSize;
                }
            }
        });

        const coverChanger = document.querySelector('div[style*="position: absolute;"][style*="right: 8px;"][style*="bottom:"]');
        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());
    });
})();