Merge pull request #724 from StampyAI/mobile-footnotes

misc fixes
StampyAI · Jun 13, 2024 · 95ca082 · 95ca082
2 parents af73627 + 138e301
commit 95ca082
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx
@@ -20,7 +20,12 @@ const footnoteHTML = (el: HTMLDivElement, e: HTMLAnchorElement): string | null =
   return elem.firstElementChild?.innerHTML || null
 }
 
-const addPopup = (e: HTMLElement, id: string, contents: string, mobile?: boolean): HTMLElement => {
+const addPopup = (
+  e: HTMLElement,
+  id: string,
+  contents: string,
+  mobile: boolean = window?.innerWidth <= 780
+): HTMLElement => {
   const preexisting = document.getElementById(id)
   if (preexisting) return preexisting
 
@@ -40,6 +45,7 @@ const addPopup = (e: HTMLElement, id: string, contents: string, mobile?: boolean
     const toggle = () => popup.classList.toggle('shown')
     popup.addEventListener('click', togglePopup(toggle, e))
     e.addEventListener('click', togglePopup(toggle, e))
+    popup.children[0].addEventListener('click', (e) => e.stopPropagation())
   }
 
   return popup

diff --git a/app/components/Article/article.css b/app/components/Article/article.css
@@ -107,15 +107,14 @@ article .link-popup {
 }
 
 article .link-popup .footnote {
-  padding: var(--spacing-32) var(--spacing-32) 0 var(--spacing-32);
+  padding: var(--spacing-32) var(--spacing-32) var(--spacing-32) var(--spacing-32);
 }
 
 article .footnote-ref {
   position: relative;
 }
 
 article .glossary-popup {
-  width: 522px;
   height: 304px;
 }
 
@@ -227,6 +226,12 @@ article .banner h3 .title {
     flex-direction: column;
     align-items: start;
   }
+  article .link-popup .footnote {
+    margin-top: 42px;
+  }
+  article .glossary-popup {
+    margin-top: 50px;
+  }
 
   article .link-popup {
     width: 100%;

diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css
@@ -47,7 +47,7 @@ article.stampy {
   right: 0;
   transform: translateX(50%);
   visibility: hidden;
-  width: 256px;
+  max-width: 256px;
   padding-top: 120%;
   z-index: 100;
 }
@@ -57,6 +57,8 @@ article.stampy {
   color: white;
   padding: var(--spacing-16);
   border-radius: var(--border-radius);
+  width: max-content; /* Make the width adapt to its content */
+  max-width: 100%;
 }
 
 .chat-entry .hint-contents-container:hover,
@@ -197,10 +199,13 @@ article.stampy {
   .reference-contents {
     flex-shrink: 0;
     width: 87.2vw;
-    margin-top: 48px;
+    margin-top: 46px;
   }
   .reference-popup {
     display: flex;
     flex-direction: column;
   }
+  .chat-entry .hint-contents-container {
+    transform: translateX(10%);
+  }
 }
diff --git a/app/root.css b/app/root.css
@@ -561,9 +561,6 @@ svg {
 /* mobile */
 
 @media (max-width: 780px) {
-  body {
-    overflow-x: hidden;
-  }
   .page-body {
     padding: 0px var(--spacing-48);
   }