before more styling things

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

@@ -8,6 +8,7 @@ import {
   DraggableItem,
 } from "../../context/draggingContext";
 import { createPortal } from "react-dom";
+import ClientOnly from "@/components/ClientOnly";
 
 export function ItemInDay({
   type,
@@ -59,11 +60,13 @@ export function ItemInDay({
       >
         {item.name}
       </Link>
-      <Tooltip
+      <ClientOnly>
-        message={message}
+        <Tooltip
-        targetRef={linkRef}
+          message={message}
-        visible={tooltipVisible && status === "incomplete"}
+          targetRef={linkRef}
-      />
+          visible={tooltipVisible && status === "incomplete"}
+        />
+      </ClientOnly>
     </div>
   );
 }
@@ -73,24 +76,14 @@ const Tooltip: React.FC<{
   targetRef: React.RefObject<HTMLElement>;
   visible: boolean;
 }> = ({ message, targetRef, visible }) => {
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-
-  useEffect(() => {
-    if (targetRef.current) {
-      const rect = targetRef.current.getBoundingClientRect();
-      setPosition({
-        top: rect.bottom + window.scrollY + 10, 
-        left: rect.left + window.scrollX + rect.width / 2, 
-      });
-    }
-  }, [targetRef]);
 
+  const rect = targetRef.current?.getBoundingClientRect();
 
   return createPortal(
     <div
       style={{
-        top: position.top,
+        top: (rect?.bottom ?? 0) + window.scrollY + 10,
-        left: position.left,
+        left: (rect?.left ?? 0) + window.scrollX + (rect?.width ?? 0) / 2,
       }}
       className={
         " absolute -translate-x-1/2 " +
@@ -98,7 +91,7 @@ const Tooltip: React.FC<{
         " rounded py-1 px-2 " +
         " transition-all duration-400 " +
         " border border-slate-700 shadow-[0_0px_10px_0px] shadow-slate-500/50 " +
-        (visible ? " opacity-100 " : " opacity-0 -z-50 ")
+        (visible ? "  " : " hidden -z-50 ")
       }
       role="tooltip"
     >

nextjs/src/app/globals.css

@@ -95,11 +95,13 @@ p {
   @apply mb-3;
 }
 
-button, .btn {
+button,
+.btn {
   @apply font-bold py-1 px-3 rounded transition-all duration-200;
 }
 
-button:not(.unstyled):not(.btn-danger), .btn:not(.unstyled):not(.btn-danger) {
+button:not(.unstyled):not(.btn-danger),
+.btn:not(.unstyled):not(.btn-danger) {
   @apply bg-blue-900 hover:bg-blue-700 text-blue-50;
 }
 
@@ -135,3 +137,7 @@ select {
 .markdownPreview a {
   @apply text-blue-500 hover:text-blue-600 font-bold underline;
 }
+
+/* .isDragging .dayDropTarget {
+  @apply bg-slate-900 shadow-[0_0px_10px_0px] shadow-blue-800/50;
+} */

nextjs/src/components/ClientOnly.tsx

@@ -1,4 +1,5 @@
-"use client"
+"use client";
+import { isServer } from "@tanstack/react-query";
 import React, { ReactNode, useEffect, useState } from "react";
 
 export default function ClientOnly({ children }: { children: ReactNode }) {
@@ -6,7 +7,7 @@ export default function ClientOnly({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     setIsClient(true);
-  }, []);
+  }, [isServer]);
 
   if (!isClient) return <></>;
   return <>{children}</>;

nextjs/src/components/Modal.tsx

@@ -25,7 +25,7 @@ export default function Modal({
 
       <div
         className={
-          "fixed inset-0 flex items-center justify-center transition-all duration-400 " +
+          " fixed inset-0 flex items-center justify-center transition-all duration-400 h-screen " +
           " bg-black" +
           (isOpen ? " bg-opacity-50  z-50  " : " bg-opacity-0  -z-50  ")
         }