hovers go below

nextjs/src/app/course/[courseName]/calendar/day/ItemInDay.tsx

@@ -24,38 +24,43 @@ export function ItemInDay({
   const { courseName } = useCourseContext();
   const { dragStart } = useDraggingContext();
   return (
-    <Link
+    <div className={" relative group "}>
-      href={getModuleItemUrl(courseName, moduleName, type, item.name)}
+      <Link
-      shallow={true}
+        href={getModuleItemUrl(courseName, moduleName, type, item.name)}
-      className={
+        shallow={true}
-        " relative group " +
+        className={
-        " border rounded-sm px-1 mx-1 break-words mb-1 " +
+          " border rounded-sm px-1 mx-1 break-words mb-1 " +
-        " bg-slate-800 " +
+          " bg-slate-800 " +
-        " block " +
+          " block " +
-        (status === "localOnly" && " text-slate-500 border-slate-600 ") +
+          (status === "localOnly" && " text-slate-500 border-slate-600 ") +
-        (status === "incomplete" && " border-rose-900 ") +
+          (status === "incomplete" && " border-rose-900 ") +
-        (status === "published" && " border-green-800 ")
+          (status === "published" && " border-green-800 ")
-      }
+        }
-      role="button"
+        role="button"
-      draggable="true"
+        draggable="true"
-      onDragStart={(e) => {
+        onDragStart={(e) => {
-        const draggableItem: DraggableItem = {
+          const draggableItem: DraggableItem = {
-          type,
+            type,
-          item,
+            item,
-          sourceModuleName: moduleName,
+            sourceModuleName: moduleName,
-        };
+          };
-        e.dataTransfer.setData("draggableItem", JSON.stringify(draggableItem));
+          e.dataTransfer.setData(
-        dragStart();
+            "draggableItem",
-      }}
+            JSON.stringify(draggableItem)
-    >
+          );
-      {item.name}
+          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>
   );
 }

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

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

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 && (

nextjs/src/app/globals.css

@@ -129,3 +129,7 @@ select {
 .markdownQuizAnswerPreview p:last-child {
   @apply p-0 m-0 ;
 }
+
+.markdownPreview a {
+  @apply text-blue-500 hover:text-blue-600 font-bold underline;
+}