Notion Full-Width Pages in Narrow Viewport Edited

Allows pages to fill the viewport width when the viewport is narrow.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name        Notion Full-Width Pages in Narrow Viewport Edited
// @namespace   Notion Custom Scripts
// @match       *://www.notion.so/*
// @grant       GM_addStyle
// @version     1.4
// @author      Jacob Zimmerman (jczimm) <[email protected]> modified by symant233
// @description Allows pages to fill the viewport width when the viewport is narrow.
// ==/UserScript==

GM_addStyle(`
@media (max-width: 850px) {
    .notion-overlay-container > div > div > div[style*="relative"] { /* don't select the gray background overlay, which has position: absolute */
        max-height: unset !important;
        max-width: unset !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
    }
    .notion-overlay-container .notion-quick-find-menu,
    .notion-overlay-container .notion-quick-find-menu > div {
        max-height: unset !important;
        max-width: unset !important;
    }
    .notion-frame > .notion-scroller > div:not(.notion-page-content) 
    > div:not([contenteditable="false"]), .notion-page-content {
        padding-left: 1.2em !important;
        padding-right: 0.6em !important;
    }
    .notion-frame > .notion-scroller > div:not(.notion-page-content)[style*="padding"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    div[data-block-id] {
        max-width: unset !important;
    }
    #notion-app > div > div.notion-cursor-listener > div.notion-sidebar-container > div > div > div > div:last-child {
        display: none !important;
    }
    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0) !important;
    }
}`);