fix(layout): viewport hard-bound to 100vh + DOM-level scrollbar dedup — Page root switches from min-height:100vh to height:100vh + overflow:hidden so no child can ever push the document past the viewport (the old 'slightly too tall' was the flex floor + cumulative gap pushing past min-height). main is flex:1 0; min-height:0; overflow:hidden so the editor card shrinks under tight viewports instead of forcing the page to grow. Scrollbar dedup: Monaco's updateOptions() on the inner editors gets re-asserted (so the original-side scrollbar kept reappearing) — drop the JS approach and hide the original pane's .scrollbar.vertical + .decorationsOverviewRuler via raw global CSS instead. Edit pill on the right pane moved from right:16px to right:36px so it clears the 8px scrollbar and the ~14px overview ruler without overlapping. Left-pane pill shifted hair to right:calc(50%+14px) to match

Author: Michael Hobl

pages/diff.vue

@@ -416,6 +416,23 @@ export default Vue.extend({
   height: 100%;
 }
 
+/* Scrollbar dedup, DOM-level. Monaco's diff editor renders two
+ * inner editors (.editor.original on the left, .editor.modified
+ * on the right), each with its own .monaco-scrollable-element
+ * scrollbar. updateOptions() on the inner editors is unreliable
+ * for hiding scrollbars (Monaco re-asserts its defaults), so we
+ * collapse the left side's scrollbar with raw CSS instead. The
+ * right-side scrollbar stays as the single canonical scroll
+ * affordance — Monaco's intra-diff sync moves both panes
+ * together. (Block is non-scoped so it reaches Monaco's
+ * externally-rendered DOM.) */
+.monaco-diff-editor .editor.original .monaco-scrollable-element > .scrollbar.vertical {
+  display: none !important;
+}
+.monaco-diff-editor .editor.original .decorationsOverviewRuler {
+  display: none !important;
+}
+
 /* Per-pane edit pill. Two of them: left pill anchors to the right
  * edge of the original (left) half of the diff, right pill anchors
  * to the right edge of the modified (right) half. Both navigate
@@ -460,16 +477,14 @@ export default Vue.extend({
   transform: scale(0.96);
 }
 .noden-pane-edit-left {
-  /* Sits at the right edge of the original (left) half. Monaco's
-   * diff editor splits the viewport ~50/50 in side-by-side mode;
-   * the original pane includes the central gutter so we position
-   * a hair to the left of the 50% mark to avoid clipping. */
-  right: calc(50% + 12px);
+  /* Sits at the right edge of the original (left) half. */
+  right: calc(50% + 14px);
 }
 .noden-pane-edit-right {
-  /* Far right of the modified (right) half, just inside the slim
-   * 8px scrollbar. */
-  right: 16px;
+  /* Far right of the modified (right) half, clearing the 8px
+   * scrollbar AND the overview ruler (~14px) so the pill never
+   * sits behind either. */
+  right: 36px;
 }
 .dark .noden-pane-edit {
   background: rgba(31, 41, 55, 0.85);

styles/global.scss

@@ -186,27 +186,30 @@ a:hover {
   color: #93c5fd;
 }
 
+/* Hard-bound the page to exactly 100vh and hide overflow so no
+ * child can ever push the document taller than the viewport.
+ * The flex cascade beneath this lives in that fixed bucket and
+ * shrinks editors to fit when chrome is tall. */
 .page-root {
-  @apply flow-root w-full;
-  min-height: 100vh;
+  @apply w-full;
+  height: 100vh;
+  overflow: hidden;
 }
 
-/* Tall layout: navbar at the top, footer at the bottom, the routed
- * page content claims everything between. main is a flex-column so
- * its child .noden-page (and that page's flex children) can cascade
- * `flex: 1` down to the editors and let them fill the viewport. */
 .page-contents {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100%;
   width: 100%;
+  overflow: hidden;
 }
 
 main {
   display: flex;
   flex-direction: column;
-  flex: 1 1 auto;
+  flex: 1 1 0;
   min-height: 0;
+  overflow: hidden;
   @apply xl:container;
   margin-top: 2rem;
 }