tweak: full width pages + table wrap bugfixes

+ neutral theme font size fix + menu focused mod b/w tab switching fix

repo/menu/components.mjs

@@ -144,7 +144,6 @@ export const options = {
           .slice(5, -1)
           .split(',')
           .map((i) => parseInt(i));
-        console.log(r, g, b, fmt.rgbContrast(r, g, b));
         $input.style.color = fmt.rgbContrast(r, g, b);
         $input.style.padding = '';
       },

repo/menu/menu.mjs

@@ -224,8 +224,10 @@ const _$modListCache = {},
       });
       $mod.addEventListener('click', async (event) => {
         if ($mod.className === 'mod-selected') return;
-        for (const $selected of document.querySelectorAll('.mod-selected')) {
+        for (const $list of Object.values(_$modListCache)) {
-          $selected.className = 'mod';
+          for (const $selected of $list.querySelectorAll('.mod-selected')) {
+            $selected.className = 'mod';
+          }
         }
         $mod.className = 'mod-selected';
         const fragment = [

repo/neutral/app.css

@@ -32,7 +32,9 @@
   font-size: 1.3rem !important;
 }
 .notion-frame .notion-scroller.vertical.horizontal .notion-page-content,
-.notion-overlay-container .notion-scroller.vertical .notion-page-content,
+.notion-overlay-container .notion-scroller.vertical .notion-page-content {
+  font-size: 15px !important;
+}
 .notion-frame
   .notion-scroller.vertical.horizontal
   .notion-page-content[style*='font-size: 14px'],

repo/theming/theme.css

@@ -6,26 +6,49 @@
 
 /** layout **/
 
-.notion-frame .notion-scroller [style*='env(safe-area-inset-'][style*=' width: 900px'],
-.notion-frame .notion-scroller [style*='env(safe-area-inset-'][style*=';width: 900px'],
 .notion-frame
-  .notion-scroller
+  > .notion-scroller.vertical.horizontal
-  [style*='height: 30vh']
+  > .pseudoSelection
-  [style*='pointer-events:'][style*='max-width: 100%; width: 900px'] {
+  > div
+  > div:nth-child(3)[style*='width: 900px'],
+.notion-frame
+  > .notion-scroller.vertical.horizontal
+  > .pseudoSelection
+  + div
+  > :nth-child(1)[style*='width: 900px'],
+.notion-frame
+  > .notion-scroller.vertical.horizontal
+  > :nth-child(2)
+  > :nth-child(2)[style*='display: flex; width: 100%; justify-content: center;']
+  > :nth-child(1)[style*='width: 900px'] {
   width: var(--theme--page-width) !important;
 }
-.notion-frame .notion-scroller [style*='env(safe-area-inset-'][style*=' width: 100%'],
 .notion-frame
-  .notion-scroller
+  > .notion-scroller.vertical.horizontal
-  [style*='height: 30vh']
+  > .pseudoSelection
-  [style*='pointer-events:'][style*='max-width: 100%; width: 100%'] {
+  > div
+  > div:nth-child(3):not([style*='width: 900px']),
+.notion-frame
+  > .notion-scroller.vertical.horizontal
+  > .pseudoSelection
+  + div
+  > :nth-child(1):not([style*='width: 900px']),
+.notion-frame
+  > .notion-scroller.vertical.horizontal
+  > :nth-child(2)
+  > :nth-child(2)[style*='display: flex; width: 100%; justify-content: center;']
+  > :nth-child(1):not([style*='width: 900px']) {
   width: var(--theme--page-width_full) !important;
 }
-.notion-frame
+.notion-page-content [style*='width: 100%; max-width:'][style*='align-self: center;'] {
-  [style*='padding-left: calc(96px + env(safe-area-inset-left)); padding-right: calc(96px + env(safe-area-inset-right));'] {
+  max-width: 100% !important;
-  padding-left: var(--theme--page-padding) !important;
+}
+.notion-frame [style*='padding-right: calc(96px + env(safe-area-inset-right));'] {
   padding-right: var(--theme--page-padding) !important;
 }
+.notion-frame [style*='padding-left: calc(96px + env(safe-area-inset-left));'] {
+  padding-left: var(--theme--page-padding) !important;
+}
 [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'],
 [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
   img {
@@ -36,7 +59,6 @@
 .notion-peek-renderer > :nth-child(2) {
   max-width: var(--theme--page_preview-width) !important;
 }
-
 .notion-peek-renderer
   .notion-scroller.vertical
   [style*='padding-left: calc(126px + env(safe-area-inset-left));'] {
@@ -62,7 +84,6 @@
   padding-right: var(--theme--page_preview-padding) !important;
   width: 100%;
 }
-
 .notion-peek-renderer
   .notion-scroller.vertical
   [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'],
@@ -444,7 +465,7 @@ body,
   > div
   > div
   > div:nth-child(1)
-  > div {
+  > div[style*='background'] {
   background: var(--theme--ui_input) !important;
 }
 

repo/tweaks/client.css

@@ -14,7 +14,8 @@
 .enhancer--tweak-responsive_breakpoint .notion-column_list-block [style='display: flex;'] {
   flex-direction: column !important;
 }
-.enhancer--tweak-responsive_breakpoint .notion-app-inner {
+.enhancer--tweak-responsive_breakpoint .notion-app-inner,
+.enhancer--tweak-full_width_pages .notion-app-inner {
   --theme--page-width: 100%;
   --theme--page-padding: calc(48px + env(safe-area-inset-left));
 }
@@ -32,59 +33,23 @@
   padding-right: 4px;
 }
 .enhancer--tweak-normalise_table_scroll
-  .notion-frame
-  .notion-page-content
   .notion-collection_view-block
-  [style*='padding-left: 126px'],
+  > [contenteditable]
+  > .notion-scroller
+  > [class$='view'][style*='padding-left'],
 .enhancer--tweak-normalise_table_scroll
-  .notion-frame
-  .notion-page-content
   .notion-collection_view-block
-  [style*='padding-left: 96px'],
+  > :first-child[style*='padding-left'] {
-.enhancer--tweak-normalise_table_scroll
-  .notion-peek-renderer
-  .notion-collection_view-block
-  [style*='padding-left: 126px'],
-.enhancer--tweak-normalise_table_scroll
-  .notion-peek-renderer
-  .notion-collection_view-block
-  [style*='padding-left: 96px'],
-.enhancer--tweak-normalise_table_scroll
-  .notion-page-template-modal
-  .notion-collection_view-block
-  [style*='padding-left: 126px'],
-.enhancer--tweak-normalise_table_scroll
-  .notion-page-template-modal
-  .notion-collection_view-block
-  [style*='padding-left: 96px'] {
   padding-left: 0 !important;
 }
 .enhancer--tweak-normalise_table_scroll
-  .notion-frame
-  .notion-page-content
   .notion-collection_view-block
-  [style*='padding-right: 126px'],
+  > [contenteditable]
+  > .notion-scroller
+  > [class$='view'][style*='padding-right'],
 .enhancer--tweak-normalise_table_scroll
-  .notion-frame
-  .notion-page-content
   .notion-collection_view-block
-  [style*='padding-right: 96px'],
+  > :first-child[style*='padding-right'] {
-.enhancer--tweak-normalise_table_scroll
-  .notion-peek-renderer
-  .notion-collection_view-block
-  [style*='padding-right: 126px'],
-.enhancer--tweak-normalise_table_scroll
-  .notion-peek-renderer
-  .notion-collection_view-block
-  [style*='padding-right: 96px'],
-.enhancer--tweak-normalise_table_scroll
-  .notion-page-template-modal
-  .notion-collection_view-block
-  [style*='padding-right: 126px'],
-.enhancer--tweak-normalise_table_scroll
-  .notion-page-template-modal
-  .notion-collection_view-block
-  [style*='padding-right: 96px'] {
   padding-right: 0 !important;
 }
 

repo/tweaks/client.mjs

@@ -21,7 +21,6 @@ export default async function (api, db) {
       screen.width * 0.01 * (await db.get(['tweak.responsive_breakpoint_percent'])),
     addResponsiveBreakpoint = () => {
       document.body.classList.remove('enhancer--tweak-responsive_breakpoint');
-      console.log(responsiveBreakpointPercent, window.innerWidth);
       if (
         window.innerWidth <= responsiveBreakpointPx ||
         window.innerWidth <= responsiveBreakpointPercent
@@ -33,6 +32,7 @@ export default async function (api, db) {
   addResponsiveBreakpoint();
 
   const tweaks = [
+    'full_width_pages',
     'normalise_table_scroll',
     'hide_help',
     'hide_slash_for_commands',

repo/tweaks/mod.json

@@ -40,6 +40,13 @@
       "tooltip": "the **percentage of the screen below which in-page columns are resized to appear full-width** to reduce content squishing",
       "value": 30
     },
+    {
+      "type": "toggle",
+      "key": "tweak.full_width_pages",
+      "label": "full width pages",
+      "tooltip": "**decreases padding so every page appears full width**",
+      "value": false
+    },
     {
       "type": "toggle",
       "key": "tweak.normalise_table_scroll",