references on mobile

app/components/Article/Contents.tsx

@@ -1,4 +1,5 @@
 import {useRef, useEffect} from 'react'
+import useIsMobile from '~/hooks/isMobile'
 import {questionUrl} from '~/routesMapper'
 import type {Glossary, PageId, GlossaryEntry} from '~/server-utils/stampy'
 
@@ -18,7 +19,14 @@ const footnoteHTML = (el: HTMLDivElement, e: HTMLAnchorElement): string | null =
   return elem.innerHTML
 }
 
-const addPopup = (e: HTMLElement, id: string, contents: string): HTMLElement => {
+const scrollToElement = (e: HTMLElement, offset?: number) => {
+  const elementPosition = e.getBoundingClientRect().top + window.pageYOffset
+  const offsetPosition = elementPosition - (offset || 0)
+
+  window.scrollTo({top: offsetPosition, behavior: 'smooth'})
+}
+
+const addPopup = (e: HTMLElement, id: string, contents: string, mobile?: boolean): HTMLElement => {
   const preexisting = document.getElementById(id)
   if (preexisting) return preexisting
 
@@ -29,10 +37,21 @@ const addPopup = (e: HTMLElement, id: string, contents: string): HTMLElement =>
 
   e.insertAdjacentElement('afterend', popup)
 
-  e.addEventListener('mouseover', () => popup.classList.add('shown'))
-  e.addEventListener('mouseout', () => popup.classList.remove('shown'))
-  popup.addEventListener('mouseover', () => popup.classList.add('shown'))
-  popup.addEventListener('mouseout', () => popup.classList.remove('shown'))
+  if (!mobile) {
+    e.addEventListener('mouseover', () => popup.classList.add('shown'))
+    e.addEventListener('mouseout', () => popup.classList.remove('shown'))
+    popup.addEventListener('mouseover', () => popup.classList.add('shown'))
+    popup.addEventListener('mouseout', () => popup.classList.remove('shown'))
+  } else {
+    const togglePopup = (event: Event) => {
+      event.preventDefault()
+      popup.classList.toggle('shown')
+      document.body.classList.toggle('noscroll')
+      scrollToElement(e, 16)
+    }
+    popup.addEventListener('click', togglePopup)
+    e.addEventListener('click', togglePopup)
+  }
 
   return popup
 }
@@ -139,6 +158,7 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
 
 const Contents = ({pageid, html, glossary}: {pageid: PageId; html: string; glossary: Glossary}) => {
   const elementRef = useRef<HTMLDivElement>(null)
+  const mobile = useIsMobile()
 
   useEffect(() => {
     const el = elementRef.current
@@ -161,14 +181,16 @@ const Contents = ({pageid, html, glossary}: {pageid: PageId; html: string; gloss
     el.querySelectorAll('.footnote-ref > a').forEach((e) => {
       const footnote = footnoteHTML(el, e as HTMLAnchorElement)
       const footnoteId = (e.getAttribute('href') || '').replace('#', '')
-      if (footnote)
+      if (footnote) {
         addPopup(
           e as HTMLAnchorElement,
           `footnote-${footnoteId}`,
-          `<div class="footnote">${footnote}</div>`
+          `<div class="footnote">${footnote}</div>`,
+          mobile
         )
+      }
     })
-  }, [html, glossary, pageid])
+  }, [html, glossary, pageid, mobile])
 
   return (
     <div

app/components/Article/article.css

@@ -91,20 +91,9 @@ article .glossary-entry {
 article .link-popup {
   visibility: hidden;
   opacity: 0;
-  position: absolute;
-  max-width: 400px;
-  display: inline-block;
-  font: var(--baseFont);
-  font-style: normal;
-  font-weight: 300;
-  line-height: 170%; /* 30.6px */
   z-index: 2;
-  left: calc(50% - 200px);
-  transform: translateY(var(--spacing-40));
-  transition:
-    visibility 0s 300ms,
-    opacity cubic-bezier(1, 0, 1, 1) 300ms;
 }
+
 article .link-popup .footnote {
   padding: var(--spacing-24) var(--spacing-24) 0 var(--spacing-24);
 }
@@ -187,6 +176,20 @@ article .banner h3 .title {
   padding-left: 10px;
 }
 
+@media (min-width: 780px) {
+  article .link-popup {
+    position: absolute;
+    max-width: 400px;
+    display: inline-block;
+    z-index: 2;
+    left: calc(50% - 200px);
+    transform: translateY(var(--spacing-40));
+    transition:
+      visibility 0s 300ms,
+      opacity cubic-bezier(1, 0, 1, 1) 300ms;
+  }
+}
+
 @media only screen and (max-width: 780px) {
   article {
     max-width: 100%;
@@ -202,4 +205,19 @@ article .banner h3 .title {
   article {
     margin: 0;
   }
+
+  article .link-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #ff000033;
+    overflow: scroll;
+  }
+  article .link-popup .footnote {
+    margin: auto;
+    background-color: white;
+    width: 80%;
+  }
 }

app/root.css

@@ -462,6 +462,10 @@ svg {
   transition-delay: 0s;
 }
 
+.noscroll {
+  overflow: hidden;
+}
+
 /* for troubleshooting */
 
 .pink {