Notion Full-Width Pages in Narrow Viewport Edited

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

  1. // ==UserScript==
  2. // @name Notion Full-Width Pages in Narrow Viewport Edited
  3. // @namespace Notion Custom Scripts
  4. // @match *://www.notion.so/*
  5. // @grant GM_addStyle
  6. // @version 1.4
  7. // @author Jacob Zimmerman (jczimm) <jczimm@jczimm.com> modified by symant233
  8. // @description Allows pages to fill the viewport width when the viewport is narrow.
  9. // ==/UserScript==
  10.  
  11. GM_addStyle(`
  12. @media (max-width: 850px) {
  13. .notion-overlay-container > div > div > div[style*="relative"] { /* don't select the gray background overlay, which has position: absolute */
  14. max-height: unset !important;
  15. max-width: unset !important;
  16. width: 100% !important;
  17. height: 100% !important;
  18. top: 0 !important;
  19. }
  20. .notion-overlay-container .notion-quick-find-menu,
  21. .notion-overlay-container .notion-quick-find-menu > div {
  22. max-height: unset !important;
  23. max-width: unset !important;
  24. }
  25. .notion-frame > .notion-scroller > div:not(.notion-page-content)
  26. > div:not([contenteditable="false"]), .notion-page-content {
  27. padding-left: 1.2em !important;
  28. padding-right: 0.6em !important;
  29. }
  30. .notion-frame > .notion-scroller > div:not(.notion-page-content)[style*="padding"] {
  31. padding-left: 0 !important;
  32. padding-right: 0 !important;
  33. }
  34. div[data-block-id] {
  35. max-width: unset !important;
  36. }
  37. #notion-app > div > div.notion-cursor-listener > div.notion-sidebar-container > div > div > div > div:last-child {
  38. display: none !important;
  39. }
  40. ::-webkit-scrollbar-track {
  41. background: rgba(0,0,0,0) !important;
  42. }
  43. }`);

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址