From 2b83ed01c2b47966f09be5a0711630681977ddfb Mon Sep 17 00:00:00 2001
From: Melissa Samworth <melissasamworth@gmail.com>
Date: Wed, 5 Jun 2024 21:59:56 -0400
Subject: [PATCH 1/2] styling fixes for reference hover (WIP)

---
 app/components/Chatbot/ChatEntry.tsx  |  6 +++---
 app/components/Chatbot/chat_entry.css |  3 ++-
 app/components/Chatbot/widgit.css     |  1 -
 app/root.css                          | 17 +++++++++++++++++
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/components/Chatbot/ChatEntry.tsx b/app/components/Chatbot/ChatEntry.tsx
index 10717c1e..a244ca1a 100644
--- a/app/components/Chatbot/ChatEntry.tsx
+++ b/app/components/Chatbot/ChatEntry.tsx
@@ -84,7 +84,7 @@ const ReferenceSummary = ({title, authors, source, url}: Citation & {titleClass?
 
   return (
     <div>
-      <div className="title padding-bottom-4">{title}</div>
+      <div className="large-bold black padding-bottom-8">{title}</div>
       <div className="small">
         <Authors authors={authors} />
         <span>{'  ·  '}</span>
@@ -104,8 +104,8 @@ const ReferencePopup = (citation: Citation) => {
   return (
     <div className="reference-contents bordered">
       <ReferenceSummary {...citation} titleClass="large-bold" />
-      <div className="grey padding-bottom-16 padding-top-24">Referenced excerpt</div>
-      <div
+      <div className="grey padding-bottom-16 padding-top-32 xs">Referenced excerpt</div>
+      <div className="default"
         dangerouslySetInnerHTML={{
           __html: md.render(parsed[1]),
         }}
diff --git a/app/components/Chatbot/chat_entry.css b/app/components/Chatbot/chat_entry.css
index 7002314f..85a0409b 100644
--- a/app/components/Chatbot/chat_entry.css
+++ b/app/components/Chatbot/chat_entry.css
@@ -122,10 +122,11 @@ article.stampy {
   word-wrap: break-word;
   background-color: white;
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
-  padding: var(--spacing-24) var(--spacing-32);
+  padding: var(--spacing-40);
   position: absolute;
   transform: translateX(50%);
   text-decoration: unset;
+  z-index: 3;
 }
 
 .reference-contents:hover,
diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css
index e492a936..e6fdadad 100644
--- a/app/components/Chatbot/widgit.css
+++ b/app/components/Chatbot/widgit.css
@@ -26,7 +26,6 @@
 .warning-floating {
   position: fixed;
   right: 4.44vw;
-  z-index: 100;
   bottom: 4.44vw;
   width: 10.13vw;
 }
diff --git a/app/root.css b/app/root.css
index 2d00952a..2b481217 100644
--- a/app/root.css
+++ b/app/root.css
@@ -382,6 +382,23 @@ h2 {
   min-height: 100%;
 }
 
+/* z-index classes */
+.z-index-1 {
+  z-index: 1;
+}
+
+.z-index-2 {
+  z-index: 2;
+}
+
+.z-index-3 {
+  z-index: 3;
+}
+
+.z-index-4 {
+  z-index: 4;
+}
+
 /* other tags */
 
 a {

From acce4ba840fa14a8be7bbd03bd91ffdf91cd2148 Mon Sep 17 00:00:00 2001
From: Melissa Samworth <melissasamworth@gmail.com>
Date: Wed, 5 Jun 2024 22:01:23 -0400
Subject: [PATCH 2/2] lint

---
 app/components/Chatbot/ChatEntry.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/Chatbot/ChatEntry.tsx b/app/components/Chatbot/ChatEntry.tsx
index a244ca1a..eb63aa2f 100644
--- a/app/components/Chatbot/ChatEntry.tsx
+++ b/app/components/Chatbot/ChatEntry.tsx
@@ -105,7 +105,8 @@ const ReferencePopup = (citation: Citation) => {
     <div className="reference-contents bordered">
       <ReferenceSummary {...citation} titleClass="large-bold" />
       <div className="grey padding-bottom-16 padding-top-32 xs">Referenced excerpt</div>
-      <div className="default"
+      <div
+        className="default"
         dangerouslySetInnerHTML={{
           __html: md.render(parsed[1]),
         }}