From 15d2ee06cf7fe051f46d1e66bb0fac17d5aa53ea Mon Sep 17 00:00:00 2001
From: Kevin Heis <heiskr@users.noreply.github.com>
Date: Tue, 6 Aug 2024 09:17:50 -0700
Subject: [PATCH] Hide scroll to top button if window is too short (#51929)

---
 .../ui/ScrollButton/ScrollButton.tsx          | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/frame/components/ui/ScrollButton/ScrollButton.tsx b/src/frame/components/ui/ScrollButton/ScrollButton.tsx
index 7746f88e68..f0c95c4ba1 100644
--- a/src/frame/components/ui/ScrollButton/ScrollButton.tsx
+++ b/src/frame/components/ui/ScrollButton/ScrollButton.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useLayoutEffect } from 'react'
 import cx from 'classnames'
 import { ChevronUpIcon } from '@primer/octicons-react'
 import styles from './ScrollButton.module.scss'
@@ -12,6 +12,7 @@ export type ScrollButtonPropsT = {
 
 export const ScrollButton = ({ className, ariaLabel }: ScrollButtonPropsT) => {
   const [show, setShow] = useState(false)
+  const [isTallEnough, setIsTallEnough] = useState(false)
 
   useEffect(() => {
     // We cannot determine document.documentElement.scrollTop height because we set the height: 100vh and set overflow to auto to keep the header sticky
@@ -33,13 +34,27 @@ export const ScrollButton = ({ className, ariaLabel }: ScrollButtonPropsT) => {
     }
   }, [])
 
+  // If the window isn't tall enough, the scroll button will hide some of the content
+  // A11y issue 8822
+  useLayoutEffect(() => {
+    function updateDocumentSize() {
+      setIsTallEnough(document.documentElement.clientHeight > 400)
+    }
+    updateDocumentSize()
+    window.addEventListener('resize', updateDocumentSize)
+    return () => window.removeEventListener('resize', updateDocumentSize)
+  }, [])
+
   const onClick = () => {
     document?.getElementById('github-logo')?.focus()
     document?.getElementById('main-content')?.scrollIntoView()
   }
 
   return (
-    <div role="tooltip" className={cx(className, transition200, show ? opacity100 : opacity0)}>
+    <div
+      role="tooltip"
+      className={cx(className, transition200, show && isTallEnough ? opacity100 : opacity0)}
+    >
       <button
         onClick={onClick}
         className={cx(