From 8e6e557e511233b69b8970d735556542cedd8ed3 Mon Sep 17 00:00:00 2001
From: Myles <mylesheller@icloud.com>
Date: Wed, 5 Jun 2024 21:58:44 -0400
Subject: [PATCH 1/3] in progress

---
 app/components/Chatbot/ChatEntry.tsx  |  2 +-
 app/components/Chatbot/chat_entry.css | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/components/Chatbot/ChatEntry.tsx b/app/components/Chatbot/ChatEntry.tsx
index 10717c1e..0a8162e9 100644
--- a/app/components/Chatbot/ChatEntry.tsx
+++ b/app/components/Chatbot/ChatEntry.tsx
@@ -33,7 +33,7 @@ const AnswerInfo = ({
         {answerType === 'human' ? 'Human-written' : 'Bot-generated'} response
       </span>
       <QuestionMarkIcon className="hint" />
-      <div className="hint-contents bordered">{hint}</div>
+      <div className="hint-contents bordered xs">{hint}</div>
     </span>
   )
 }
diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css
index 7002314f..3613b089 100644
--- a/app/components/Chatbot/chat_entry.css
+++ b/app/components/Chatbot/chat_entry.css
@@ -14,6 +14,7 @@ article.stampy {
 }
 
 .chat-entry .info {
+  position: relative;
   display: flex;
   gap: var(--spacing-8);
   align-items: center;
@@ -21,17 +22,19 @@ article.stampy {
 
 .chat-entry .hint-contents {
   position: absolute;
-  transform: translateY(var(--spacing-24));
+  top: -10px;
+  right: 0;
+  transform: translateX(-50%);
   visibility: hidden;
   width: 256px;
+  background: var(--colors-cool-grey-800);
+  color: white;
+  padding: var(--spacing-16);
 }
 
 .chat-entry .hint-contents:hover,
 .chat-entry .hint:hover + .hint-contents {
   visibility: visible;
-  background: var(--colors-cool-grey-800);
-  color: white;
-  padding: var(--spacing-16);
 }
 
 .chat-entry .reference-link {

From 1a6b91b8f1d7e4ccdc4854e19665b55a87394d84 Mon Sep 17 00:00:00 2001
From: Myles <mylesheller@icloud.com>
Date: Thu, 6 Jun 2024 10:54:59 -0400
Subject: [PATCH 2/3] Made hint look very nice

---
 app/components/Chatbot/ChatEntry.tsx  |  8 ++++++--
 app/components/Chatbot/chat_entry.css | 22 ++++++++++++++++------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/app/components/Chatbot/ChatEntry.tsx b/app/components/Chatbot/ChatEntry.tsx
index 0a8162e9..3e783ca9 100644
--- a/app/components/Chatbot/ChatEntry.tsx
+++ b/app/components/Chatbot/ChatEntry.tsx
@@ -32,8 +32,12 @@ const AnswerInfo = ({
       <span className="small grey">
         {answerType === 'human' ? 'Human-written' : 'Bot-generated'} response
       </span>
-      <QuestionMarkIcon className="hint" />
-      <div className="hint-contents bordered xs">{hint}</div>
+      <div className="icon-container leading-0">
+        <QuestionMarkIcon className="hint" />
+        <div className="hint-contents-container">
+          <div className="hint-contents xs">{hint}</div>
+        </div>
+      </div>
     </span>
   )
 }
diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css
index 3613b089..03391890 100644
--- a/app/components/Chatbot/chat_entry.css
+++ b/app/components/Chatbot/chat_entry.css
@@ -20,20 +20,30 @@ article.stampy {
   align-items: center;
 }
 
-.chat-entry .hint-contents {
+.chat-entry .icon-container {
+  position: relative;
+}
+
+.chat-entry .hint-contents-container {
   position: absolute;
-  top: -10px;
+  top: 0;
   right: 0;
-  transform: translateX(-50%);
+  transform: translateX(50%);
   visibility: hidden;
   width: 256px;
-  background: var(--colors-cool-grey-800);
+  padding-top: 120%;
+  z-index: 100;
+}
+
+.chat-entry .hint-contents {
+  background: var(--colors-cool-grey-900);
   color: white;
   padding: var(--spacing-16);
+  border-radius: var(--border-radius);
 }
 
-.chat-entry .hint-contents:hover,
-.chat-entry .hint:hover + .hint-contents {
+.chat-entry .hint-contents-container:hover,
+.chat-entry .hint:hover + .hint-contents-container {
   visibility: visible;
 }
 

From e42d18b8cb78f372afa72570b374ec53cfb31c30 Mon Sep 17 00:00:00 2001
From: Myles <mylesheller@icloud.com>
Date: Thu, 6 Jun 2024 14:30:56 -0400
Subject: [PATCH 3/3] article spacing fixed

---
 app/components/Article/Contents.tsx   | 14 ++++++++++++--
 app/components/Article/index.tsx      |  7 ++++++-
 app/components/Chatbot/chat_entry.css |  4 ++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx
index 744e93ee..4e47dff2 100644
--- a/app/components/Article/Contents.tsx
+++ b/app/components/Article/Contents.tsx
@@ -156,7 +156,17 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
   }
 }
 
-const Contents = ({pageid, html, glossary}: {pageid: PageId; html: string; glossary: Glossary}) => {
+const Contents = ({
+  pageid,
+  html,
+  glossary,
+  className = '',
+}: {
+  pageid: PageId
+  html: string
+  glossary: Glossary
+  className?: string
+}) => {
   const elementRef = useRef<HTMLDivElement>(null)
   const mobile = useIsMobile()
 
@@ -194,7 +204,7 @@ const Contents = ({pageid, html, glossary}: {pageid: PageId; html: string; gloss
 
   return (
     <div
-      className="contents large-reading padding-bottom-80"
+      className={`contents large-reading ${className}`}
       dangerouslySetInnerHTML={{
         __html: html,
       }}
diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
index 326df6b4..ec051960 100644
--- a/app/components/Article/index.tsx
+++ b/app/components/Article/index.tsx
@@ -148,7 +148,12 @@ export const Article = ({question, glossary, className}: ArticleProps) => {
       {question.banners?.filter((b) => b.title).map(Banner)}
       <ArticleMeta question={question} className="padding-bottom-56" />
 
-      <Contents pageid={pageid} html={text || ''} glossary={glossary || {}} />
+      <Contents
+        className="padding-bottom-80"
+        pageid={pageid}
+        html={text || ''}
+        glossary={glossary || {}}
+      />
 
       <KeepGoing {...question} />
 
diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css
index 03391890..587123b6 100644
--- a/app/components/Chatbot/chat_entry.css
+++ b/app/components/Chatbot/chat_entry.css
@@ -47,6 +47,10 @@ article.stampy {
   visibility: visible;
 }
 
+.chat-entry .footnotes {
+  padding-top: var(--spacing-32);
+}
+
 .chat-entry .reference-link {
   font-size: 12px;
   line-height: 12px;