responsive jadwal

components/beranda/UserJadwal.vue

@@ -275,6 +275,8 @@ function calculateRowSpan(start: string, end: string) {
   display: flex;
   display: flex;
   justify-content: space-between; /* Pushes elements to the left & right */
   justify-content: space-between; /* Pushes elements to the left & right */
   inline-size: 100%; /* Ensures full width */
   inline-size: 100%; /* Ensures full width */
+  text-overflow: ellipsis; /* Adds "..." when text is too long */
+  word-break: break-word; /* Allows text to wrap naturally */
 }
 }
 
 
 .time {
 .time {
@@ -283,13 +285,48 @@ function calculateRowSpan(start: string, end: string) {
 }
 }
 
 
 .room {
 .room {
+  overflow: hidden;
   font-weight: normal;
   font-weight: normal;
   text-align: end; /* Aligns room to the right */
   text-align: end; /* Aligns room to the right */
+  text-overflow: ellipsis;
 }
 }
 
 
 .building {
 .building {
   font-weight: normal;
   font-weight: normal;
   opacity: 0.8;
   opacity: 0.8;
-  text-align: end; /* Aligns room to the right */
+  text-align: start; /* Aligns room to the right */
+}
+
+@media screen and (max-width: 1200px) {
+  .course-title {
+    border-block-end: 0 solid;
+  }
+
+  .course-header {
+    overflow-x: hidden; /* Hides horizontal overflow */
+    text-overflow: ellipsis; /* Adds "..." when text is too long */
+    word-break: break-word; /* Allows text to wrap naturally */
+  }
+
+  .building,
+  .time {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .course-title {
+    border-block-end: 0 solid;
+  }
+
+  .room {
+    text-align: start;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .room {
+    display: none;
+  }
 }
 }
 </style>
 </style>