Notion Full-Width Pages in Narrow Viewport Edited のソースコード

Notion Full-Width Pages in Narrow Viewport Edited

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

右端で折り返す

// ==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;
    }
}`);