Better handling of overflow to improve scroll watching

packages/web/components/templates/PrimaryLayout.tsx

@@ -85,32 +85,24 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
       ) : null}
       <Box
         css={{
+          height: '100%',
           width: '100vw',
-          height: '100vh',
-          bg: 'transparent',
+          bg: '$thBackground2',
         }}
       >
-        <Box
-          css={{
-            height: '100%',
-            width: '100vw',
-            bg: '$thBackground2',
-          }}
-        >
-          {props.children}
-          {showLogoutConfirmation ? (
-            <ConfirmationModal
-              message={'Are you sure you want to log out?'}
-              onAccept={logout}
-              onOpenChange={() => setShowLogoutConfirmation(false)}
-            />
-          ) : null}
-          {showKeyboardCommandsModal ? (
-            <KeyboardShortcutListModal
-              onOpenChange={() => setShowKeyboardCommandsModal(false)}
-            />
-          ) : null}
-        </Box>
+        {props.children}
+        {showLogoutConfirmation ? (
+          <ConfirmationModal
+            message={'Are you sure you want to log out?'}
+            onAccept={logout}
+            onOpenChange={() => setShowLogoutConfirmation(false)}
+          />
+        ) : null}
+        {showKeyboardCommandsModal ? (
+          <KeyboardShortcutListModal
+            onOpenChange={() => setShowKeyboardCommandsModal(false)}
+          />
+        ) : null}
       </Box>
       <div data-testid={props.pageTestId} />
     </>

packages/web/components/templates/article/Article.tsx

@@ -86,9 +86,22 @@ export function Article(props: ArticleProps): JSX.Element {
         window.scrollY / window.document.scrollingElement.scrollHeight
       const adjustedReadingProgress =
         newReadingProgress > 0.92 ? 1 : newReadingProgress
+
+      const bottomProgress =
+        (window.scrollY + window.document.scrollingElement.clientHeight) /
+        window.document.scrollingElement.scrollHeight
+
+      console.log(
+        'newOffset Top: ',
+        newReadingProgress,
+        'newOffset Bottom: ',
+        bottomProgress,
+        window.scrollY,
+        window.document.scrollingElement.scrollHeight
+      )
       debouncedSetReadingProgress(adjustedReadingProgress * 100)
     }
-  }, 1000)
+  }, 2500)
 
   // Scroll to initial anchor position
   useEffect(() => {

packages/web/lib/themeUpdater.tsx

@@ -37,7 +37,6 @@ function getTheme(themeId: string) {
 
 export function updateThemeLocally(themeId: string): void {
   if (typeof window !== 'undefined') {
-    console.trace('storing theme: ', themeId)
     window.localStorage.setItem(themeKey, themeId)
   }
 
@@ -91,7 +90,6 @@ export function applyStoredTheme(syncWithServer = true): ThemeId | undefined {
     | ThemeId
     | undefined
   if (theme && Object.values(ThemeId).includes(theme)) {
-    console.log('applying stored theme: ', theme)
     updateThemeLocally(theme)
   }
   return theme

packages/web/pages/app/[username]/[slug]/index.tsx

@@ -73,13 +73,7 @@ function AppArticleEmbedContent(
 
   if (articleData) {
     return (
-      <Box
-        css={{
-          overflowY: 'auto',
-          height: '100%',
-          width: '100vw',
-        }}
-      >
+      <Box>
         <Script async src="/static/scripts/mathJaxConfiguration.js" />
         <Script
           async