Add ellipses for overflow timetable titles and set 4 timetable cards per row instead of 5 on large screen sizes

Author: Austin-X

course-matrix/frontend/src/pages/Home/Home.tsx

@@ -67,7 +67,7 @@ const Home = () => {
           </div>
         </div>
         <hr />
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 justify-between mt-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 justify-between mt-4">
           {isLoading ? (
             <p className="text-sm text-muted-foreground">Loading...</p>
           ) : (

course-matrix/frontend/src/pages/Home/TimetableCard.tsx

@@ -76,7 +76,7 @@ const TimetableCard = ({
               value={timetableCardTitle}
               className={
                 !isEditingTitle
-                  ? "-ml-3 w-5/6 font-bold border-none"
+                  ? "-ml-3 font-bold border-none text-ellipsis"
                   : "w-5/6 font-bold"
               }
               onChange={(e) => setTimetableCardTitle(e.target.value)}