Fix intersection observer root along with layout refactoring

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+extensions/extensions.tsx

@@ -487,7 +487,7 @@ export class Extensions extends React.Component {
 
     return (
       <DropFileInput onDropFiles={this.installOnDrop}>
-        <PageLayout showOnTop className="Extensions flex column gaps" header={topHeader} contentGaps={false}>
+        <PageLayout showOnTop className="Extensions" header={topHeader} contentGaps={false}>
           <h2>Lens Extensions</h2>
           <div>
             Add new features and functionality via Lens Extensions.

src/renderer/components/+preferences/preferences.tsx

@@ -32,7 +32,6 @@ export class Preferences extends React.Component {
   render() {
     const { preferences } = userStore;
     const header = <h2>Preferences</h2>;
-    const rootMargin = "80px 0px -80%";
     let defaultShell = process.env.SHELL || process.env.PTYSHELL;
 
     if (!defaultShell) {
@@ -44,7 +43,7 @@ export class Preferences extends React.Component {
     }
 
     return (
-      <ScrollSpy rootMargin={rootMargin} render={navigation => (
+      <ScrollSpy htmlFor="ScrollSpyRoot" render={navigation => (
         <PageLayout
           showOnTop
           navigation={navigation}

src/renderer/components/layout/page-layout.scss

@@ -1,8 +1,7 @@
 .PageLayout {
   --width: 60%;
-  --max-width: 1000px;
-  --min-width: 570px;
   --nav-width: 180px;
+  --nav-column-width: 30vw;
   --spacing: calc(var(--unit) * 2);
   --wrapper-padding: calc(var(--spacing) * 2);
   --header-height: 64px;
@@ -13,13 +12,18 @@
   height: 100%;
   display: grid !important;
   grid-template-rows: min-content 1fr;
+  grid-template-columns: 1fr;
 
   &.showNavigation {
     --width: 70%;
 
-    > .content-scrollable-area {
+    grid-template-columns: var(--nav-column-width) 1fr;
-      > .content-wrapper {
+
-        grid-template-columns: var(--nav-width) 1fr;
+    > .content {
+      > * {
+        width: 100%;
+        padding-left: 1px; // Fix visual content crop
+        padding-right: calc(var(--nav-column-width) - var(--nav-width));
       }
     }
   }
@@ -47,33 +51,29 @@
     padding: var(--spacing);
     background-color: var(--layoutTabsBackground);
     height: var(--header-height);
+    grid-column-start: 1;
+    grid-column-end: 4;
+    margin-bottom: 24px;
   }
 
-  > .content-scrollable-area {
+  > .content-navigation {
+    display: flex;
+    justify-content: flex-end;
+    overflow-y: auto;
+
+    ul.TreeView {
+      width: var(--nav-width);
+      padding-right: 24px;
+    }
+  }
+
+  > .content {
     overflow: auto;
 
-    > .content-wrapper {
+    > * {
-      display: grid;
-      grid-template-columns: none;
-      column-gap: 24px;
       width: var(--width);
-      min-width: var(--min-width);
-      max-width: var(--max-width);
-      padding: var(--wrapper-padding);
       margin: 0 auto;
-
+      padding-bottom: 24px;
-      .content-navigation {
-        > ul {
-          position: fixed;
-          width: var(--nav-width);
-          height: calc(100vh - var(--header-height) - var(--wrapper-padding) - var(--bottom-bar-height));
-          overflow-y: auto;
-        }
-
-        .is-mac & > ul {
-          height: calc(100vh - var(--header-height-mac) - var(--wrapper-padding) - var(--bottom-bar-height));
-        }
-      }
     }
   }
 

src/renderer/components/layout/page-layout.tsx

@@ -75,16 +75,17 @@ export class PageLayout extends React.Component<PageLayoutProps> {
             />
           )}
         </div>
-        <div className="content-scrollable-area">
+        { navigation && (
-          <div className="content-wrapper">
+          <nav className="content-navigation">
-            { navigation && (
+            <RecursiveTreeView data={navigation}/>
-              <nav className="content-navigation">
+          </nav>
-                <RecursiveTreeView data={navigation}/>
+        )}
-              </nav>
+        <div
-            )}
+          className={cssNames("content", contentClass)}
-            <div className={cssNames("content", contentGaps && "flex column gaps", contentClass)}>
+          id="ScrollSpyRoot"
-              {children}
+        >
-            </div>
+          <div className={cssNames(contentGaps && "flex column gaps")}>
+            {children}
           </div>
         </div>
       </div>

src/renderer/components/scroll-spy/scroll-spy.tsx

@@ -5,10 +5,11 @@ import { NavigationTree } from "../tree-view";
 
 interface Props extends React.DOMAttributes<HTMLElement> {
   render: (data: NavigationTree[]) => JSX.Element
+  htmlFor?: string // Id of the element to put observers on
   rootMargin?: string // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
 }
 
-export const ScrollSpy = observer(({ render, rootMargin = "0px 0px -80%" }: Props) => {
+export const ScrollSpy = observer(({ render, htmlFor, rootMargin = "0px 0px -100% 0px" }: Props) => {
   const parent = useRef<HTMLDivElement>();
   const sections = useRef<NodeListOf<HTMLElement>>();
   const [tree, setTree] = useState<NavigationTree[]>([]);
@@ -64,7 +65,7 @@ export const ScrollSpy = observer(({ render, rootMargin = "0px 0px -80%" }: Prop
 
   const observeSections = () => {
     const options: IntersectionObserverInit = {
-      threshold: [0],
+      root: document.getElementById(htmlFor) || getSectionsParentElement(),
       rootMargin
     };