From 3b26a64aeffd0d15d78040bea069a8fbc023084c Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Mon, 23 Sep 2024 16:34:01 -0600
Subject: [PATCH] hovers go below

---
 .../[courseName]/calendar/day/ItemInDay.tsx   | 59 ++++++++++---------
 .../[assignmentName]/AssignmentPreview.tsx    |  1 +
 .../page/[pageName]/PagePreview.tsx           |  1 +
 .../quiz/[quizName]/QuizPreview.tsx           |  2 +-
 nextjs/src/app/globals.css                    |  4 ++
 5 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx b/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
index 39c79ad..d900ba1 100644
--- a/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx
@@ -24,38 +24,43 @@ export function ItemInDay({
   const { courseName } = useCourseContext();
   const { dragStart } = useDraggingContext();
   return (
-    <Link
-      href={getModuleItemUrl(courseName, moduleName, type, item.name)}
-      shallow={true}
-      className={
-        " relative group " +
-        " border rounded-sm px-1 mx-1 break-words mb-1 " +
-        " bg-slate-800 " +
-        " block " +
-        (status === "localOnly" && " text-slate-500 border-slate-600 ") +
-        (status === "incomplete" && " border-rose-900 ") +
-        (status === "published" && " border-green-800 ")
-      }
-      role="button"
-      draggable="true"
-      onDragStart={(e) => {
-        const draggableItem: DraggableItem = {
-          type,
-          item,
-          sourceModuleName: moduleName,
-        };
-        e.dataTransfer.setData("draggableItem", JSON.stringify(draggableItem));
-        dragStart();
-      }}
-    >
-      {item.name}
+    <div className={" relative group "}>
+      <Link
+        href={getModuleItemUrl(courseName, moduleName, type, item.name)}
+        shallow={true}
+        className={
+          " border rounded-sm px-1 mx-1 break-words mb-1 " +
+          " bg-slate-800 " +
+          " block " +
+          (status === "localOnly" && " text-slate-500 border-slate-600 ") +
+          (status === "incomplete" && " border-rose-900 ") +
+          (status === "published" && " border-green-800 ")
+        }
+        role="button"
+        draggable="true"
+        onDragStart={(e) => {
+          const draggableItem: DraggableItem = {
+            type,
+            item,
+            sourceModuleName: moduleName,
+          };
+          e.dataTransfer.setData(
+            "draggableItem",
+            JSON.stringify(draggableItem)
+          );
+          dragStart();
+        }}
+      >
+        {item.name}
+      </Link>
       {status === "incomplete" && (
         <div
           className={
             " absolute opacity-0 transition-all duration-700 " +
             " group-hover:block group-hover:opacity-100" +
             " bg-gray-800 text-white text-sm " +
-            " rounded py-1 px-2 bottom-full mb-2 left-1/2 transform -translate-x-1/2 " +
+            " rounded py-1 px-2 " +
+            " top-full mt-2 transform left-1/2 -translate-x-1/2 " +
             " whitespace-no-wrap min-w-full max-w-96 "
           }
           role="tooltip"
@@ -63,6 +68,6 @@ export function ItemInDay({
           {message}
         </div>
       )}
-    </Link>
+    </div>
   );
 }
diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx
index 8658a16..29fe082 100644
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx
@@ -48,6 +48,7 @@ export default function AssignmentPreview({
       <br />
       <section>
         <div
+          className="markdownPreview"
           dangerouslySetInnerHTML={{
             __html: markdownToHTMLSafe(assignment.description),
           }}
diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/PagePreview.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/PagePreview.tsx
index 8f06b50..04f7c65 100644
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/PagePreview.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/PagePreview.tsx
@@ -5,6 +5,7 @@ import React from "react";
 export default function PagePreview({ page }: { page: LocalCoursePage }) {
   return (
     <div
+      className="markdownPreview"
       dangerouslySetInnerHTML={{
         __html: markdownToHTMLSafe(page.text),
       }}
diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx
index 2783c7b..363f472 100644
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx
@@ -78,7 +78,7 @@ function QuizQuestionPreview({ question }: { question: LocalQuizQuestion }) {
       </div>
 
       <div
-        className="ms-4 mb-2"
+        className="ms-4 mb-2 markdownPreview"
         dangerouslySetInnerHTML={{ __html: markdownToHTMLSafe(question.text) }}
       ></div>
       {question.questionType === QuestionType.MATCHING && (
diff --git a/nextjs/src/app/globals.css b/nextjs/src/app/globals.css
index f034d98..3a34b50 100644
--- a/nextjs/src/app/globals.css
+++ b/nextjs/src/app/globals.css
@@ -128,4 +128,8 @@ select {
 
 .markdownQuizAnswerPreview p:last-child {
   @apply p-0 m-0 ;
+}
+
+.markdownPreview a {
+  @apply text-blue-500 hover:text-blue-600 font-bold underline;
 }
\ No newline at end of file