Fix blog page scrollbar getting cut off when resizing

Author: bchou9

frontend/src/components/Blog.js

@@ -33,129 +33,11 @@ function Blog() {
       });
   }, []);
 
-  // Ensure page-level horizontal overflow is hidden while this component is mounted
-  useEffect(() => {
-    const prevHtmlOverflowX = document.documentElement.style.overflowX;
-    const prevBodyOverflowX = document.body.style.overflowX;
-    const prevBodyMarginRight = document.body.style.marginRight;
-    document.documentElement.style.overflowX = 'hidden';
-    document.body.style.overflowX = 'hidden';
-    // ensure no body margin that could shift scrollbar
-    document.body.style.marginRight = '0';
-    return () => {
-      document.documentElement.style.overflowX = prevHtmlOverflowX;
-      document.body.style.overflowX = prevBodyOverflowX;
-      document.body.style.marginRight = prevBodyMarginRight;
-    };
-  }, []);
-
-  // Compute header/footer heights at runtime and set container offsets so content isn't overlapped
-  const [offsets, setOffsets] = React.useState({ top: null, bottom: null });
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const headerSelectors = ['header', '[data-app-header]', '.app-header', '.MuiAppBar-root', '.MuiPaper-root'];
-    const footerSelectors = ['footer', '[data-app-footer]', '.app-footer', '.app-footer-root'];
-
-    function findEl(selectors, type = 'footer') {
-      // try provided selectors first
-      for (const s of selectors) {
-        const el = document.querySelector(s);
-        if (el) return el;
-      }
-      // try by class name containing 'footer' or 'header'
-      const keyword = type === 'header' ? 'header' : 'footer';
-      const byClass = Array.from(document.querySelectorAll('[class]')).find(el => {
-        try {
-          return el.className && String(el.className).toLowerCase().includes(keyword);
-        } catch (e) {
-          return false;
-        }
-      });
-      if (byClass) return byClass;
-      // try role attributes
-      const role = type === 'header' ? '[role="banner"]' : '[role="contentinfo"]';
-      const byRole = document.querySelector(role);
-      if (byRole) return byRole;
-
-      // final fallback: find an element tucked at the bottom of the viewport
-      const candidates = Array.from(document.querySelectorAll('body *')).filter(el => {
-        const r = el.getBoundingClientRect();
-        // visible and non-zero size
-        return r.width > 10 && r.height > 10 && r.bottom >= (window.innerHeight - 1);
-      });
-      if (candidates.length) {
-        // pick the one with the greatest top (closest to bottom)
-        candidates.sort((a, b) => b.getBoundingClientRect().top - a.getBoundingClientRect().top);
-        return candidates[0];
-      }
-      return null;
-    }
-
-    function compute() {
-      const headerEl = findEl(headerSelectors, 'header');
-      const footerEl = findEl(footerSelectors, 'footer');
-      const top = headerEl ? Math.ceil(headerEl.getBoundingClientRect().height) : null;
-      let bottom = null;
-      if (footerEl) {
-        // use the footer element's height so our container sits above it
-        const fr = footerEl.getBoundingClientRect();
-        bottom = Math.ceil(fr.height);
-        // if footer is positioned above bottom (e.g., floating), ensure bottom includes distance from viewport bottom
-        const distanceFromBottom = Math.max(0, Math.ceil(window.innerHeight - fr.bottom));
-        bottom = bottom + distanceFromBottom;
-      }
-      // enforce a small minimum so container never touches the footer exactly
-      const MIN_BOTTOM = 4;
-      if (bottom != null) bottom = Math.max(bottom, MIN_BOTTOM);
-
-      // account for iOS safe-area inset-bottom if present
-      const safeAreaInset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-bottom') || '0', 10) || 0;
-      if (safeAreaInset > 0 && bottom != null) bottom += safeAreaInset;
-
-      setOffsets({ top, bottom });
-    }
-
-    compute();
-    const ro = new ResizeObserver(() => compute());
-    // observe header/footer if present
-    const headerEl = findEl(headerSelectors);
-    const footerEl = findEl(footerSelectors);
-    if (headerEl) ro.observe(headerEl);
-    if (footerEl) ro.observe(footerEl);
-
-    // MutationObserver to detect layout changes inside footer (class changes, child changes)
-    const mo = new MutationObserver(() => compute());
-    if (footerEl) mo.observe(footerEl, { attributes: true, childList: true, subtree: true });
-
-    // Debounced resize handler (run compute immediately and once after resize stops)
-    let resizeTimer = null;
-    function onResize() {
-      compute();
-      if (resizeTimer) clearTimeout(resizeTimer);
-      resizeTimer = setTimeout(() => {
-        compute();
-        resizeTimer = null;
-      }, 200);
-    }
-
-    window.addEventListener('resize', onResize);
-
-    return () => {
-      window.removeEventListener('resize', onResize);
-      try { ro.disconnect(); } catch (e) { }
-      try { mo.disconnect(); } catch (e) { }
-      if (resizeTimer) clearTimeout(resizeTimer);
-    };
-  }, []);
-
   if (loading) {
     return (
       <Box
         sx={{
-          width: 'auto',
-          height: 'calc(100vh - var(--app-header-height, 75px) - var(--app-footer-height, 150px))',
+          minHeight: '100vh',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -171,8 +53,7 @@ function Blog() {
     return (
       <Box
         sx={{
-          width: 'auto',
-          height: 'calc(100vh - var(--app-header-height, 75px) - var(--app-footer-height, 150px))',
+          minHeight: '100vh',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -189,38 +70,15 @@ function Blog() {
   return (
     <Box
       sx={{
-        position: 'fixed',
-        top: offsets.top != null ? `${offsets.top}px` : 'var(--app-header-height, 75px)',
-        bottom: offsets.bottom != null ? `${offsets.bottom}px` : 'var(--app-footer-height, 10px)',
-        left: 0,
-        right: 0,
-        boxSizing: 'border-box',
+        minHeight: '100vh',
         backgroundColor: '#f9f9f9',
-        overflowX: 'hidden',
-        // keep layout stacking context
-        zIndex: 1,
-        ...(process.env.NODE_ENV === 'development' ? { outline: '2px dashed rgba(0,0,0,0.08)' } : {}),
+        paddingLeft: '2rem',
+        paddingRight: '2rem',
+        paddingTop: '1rem',
+        paddingBottom: '1rem',
+        boxSizing: 'border-box',
       }}
     >
-      <Box
-        sx={{
-          position: 'absolute',
-          inset: 0,
-          boxSizing: 'border-box',
-          paddingLeft: '2rem',
-          paddingRight: '2rem',
-          paddingTop: '1rem',
-          paddingBottom: '1rem',
-          overflowY: 'auto',
-          overflowX: 'hidden',
-          WebkitOverflowScrolling: 'touch',
-          '&::-webkit-scrollbar': { width: '12px' },
-          '&::-webkit-scrollbar-track': { background: 'transparent' },
-          '&::-webkit-scrollbar-thumb': { backgroundColor: '#c1c1c1', borderRadius: '6px' },
-          scrollbarWidth: 'auto',
-          scrollbarColor: '#c1c1c1 transparent',
-        }}
-      >
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}
           rehypePlugins={[rehypeRaw]}
@@ -442,7 +300,6 @@ function Blog() {
         >
           {readmeContent}
         </ReactMarkdown>
-      </Box>
     </Box>
   );
 }