Replaced getComputedStyle with bounding box values

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.94ba1295.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.7a912663.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.94ba1295.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7a912663.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.f33cd904.min.js",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.daf35bb7.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.f33cd904.min.js.map",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.daf35bb7.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.784c5235.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.784c5235.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.4e5ff6db.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.4b1ae2ca.min.css",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.31180ff2.min.css"
 }

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.4e5ff6db.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.4b1ae2ca.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.31180ff2.min.css' | url }}">
       {% endif %}
@@ -177,8 +177,8 @@
       <script>var __config={}</script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.f33cd904.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.daf35bb7.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.94ba1295.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.7a912663.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/javascripts/components/main/react/index.ts

@@ -87,10 +87,10 @@ export function watchMain(
   /* Compute the main area's top and bottom markers */
   const marker$ = watchElementSize(el)
     .pipe(
-      map(({ height }) => [
+      map(({ height }) => ({
-        el.offsetTop,
+        top:    el.offsetTop,
-        el.offsetTop + height
+        bottom: el.offsetTop + height
-      ]),
+      })),
       distinctUntilChanged(),
       shareReplay(1)
     )
@@ -98,7 +98,7 @@ export function watchMain(
   /* Compute the main area's visible height */
   const height$ = combineLatest([adjust$, marker$, viewport$])
     .pipe(
-      map(([header, [top, bottom], { offset: { y }, size: { height } }]) => {
+      map(([header, { top, bottom }, { offset: { y }, size: { height } }]) => {
         return height
           - Math.max(0, top    - y,  header)
           - Math.max(0, height + y - bottom)
@@ -110,14 +110,14 @@ export function watchMain(
   /* Compute whether the viewport offset is past the main area's top */
   const active$ = combineLatest([adjust$, marker$, viewport$])
     .pipe(
-      map(([header, [top], { offset: { y } }]) => y >= top - header),
+      map(([header, { top }, { offset: { y } }]) => y >= top - header),
       distinctUntilChanged()
     )
 
   /* Combine into a single observable */
   return combineLatest([adjust$, marker$, height$, active$])
     .pipe(
-      map(([header, [top], height, active]) => ({
+      map(([header, { top }, height, active]) => ({
         offset: top - header,
         height,
         active

src/assets/javascripts/components/shared/sidebar/react/index.ts

@@ -25,11 +25,11 @@ import {
   Observable,
   animationFrameScheduler,
   combineLatest,
+  of,
   pipe
 } from "rxjs"
 import {
   distinctUntilChanged,
-  distinctUntilKeyChanged,
   finalize,
   map,
   observeOn,
@@ -90,19 +90,11 @@ interface ApplyOptions {
 export function watchSidebar(
   el: HTMLElement, { main$, viewport$ }: WatchOptions
 ): Observable<Sidebar> {
-
+  const inner = el.parentElement!
-  /* Adjust for internal main area offset */
+  const outer = inner.parentElement!
-  const adjust$ = viewport$
-    .pipe(
-      distinctUntilKeyChanged("size"),
-      map(() => parseFloat(
-        getComputedStyle(el.parentElement!)
-          .getPropertyValue("padding-top")
-      )),
-      distinctUntilChanged()
-    )
 
   /* Compute the sidebar's available height */
+  const adjust$ = of(inner.offsetTop - outer.offsetTop)
   const height$ = viewport$
     .pipe(
       withLatestFrom(adjust$, main$),

src/assets/stylesheets/layout/_base.scss

@@ -111,11 +111,7 @@ hr {
   // Increase top spacing of content area to give typography more room
   &__inner {
     height: 100%;
-    padding-top: px2rem(24px + 6px);
+    margin-top: px2rem(24px + 6px);
-    // Hack: induce margin-collapse, because otherwise the sidebar height is
-    // not calculated correctly and the overflow property on this element must
-    // be left in initial state for targetted link offsets to work properly
-    padding-bottom: px2rem(1px);
   }
 }