styling fixes for reference hover (WIP)

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]),
         }}

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,

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;
 }

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 {