better border

nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx

@@ -3,7 +3,6 @@ import { useState } from "react";
 import { CalendarMonthModel } from "./calendarMonthUtils";
 import { DayOfWeek } from "@/models/local/localCourse";
 import Day from "./Day";
-import "./calendarMonth.css";
 
 export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
   const weekInMilliseconds = 604_800_000;
@@ -24,22 +23,22 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
   console.log(isCollapsed);
   return (
     <>
-      <h3
-        className={
-          "text-center text-2xl transition-all duration-500 hover:text-slate-50 underline hover:scale-105"
-        }
-        onClick={toggleCollapse}
-        role="button"
-      >
-        {monthName}
-      </h3>
+      <div className="flex justify-center">
+        <h3
+          className={
+            "text-2xl transition-all duration-500 " +
+            "hover:text-slate-50 underline hover:scale-105 "
+          }
+          onClick={toggleCollapse}
+          role="button"
+        >
+          {monthName}
+        </h3>
+      </div>
 
       <div
         id={monthName}
-        className={"panel"}
-        style={{
-          maxHeight: isCollapsed ? "0" : "100vh",
-        }}
+        className={"collapsable " + (isCollapsed ? "" : "expand")}
       >
         <div className="grid grid-cols-7 text-center fw-bold">
           {weekDaysList.map((day) => (