diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx index 500edb86..ba16a848 100644 --- 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 index 0195b481..51d84783 100644 --- a/app/components/Article/article.css +++ b/app/components/Article/article.css @@ -107,7 +107,7 @@ 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 { @@ -115,7 +115,6 @@ article .footnote-ref { } 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 index cba79647..bd565141 100644 --- 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 index 688cf9ae..14330e1f 100644 --- 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); }