Update VocabCourseView styles for improved table layout and responsiveness

- Changed table layout to 'separate' for better spacing and visual clarity.
- Adjusted column widths and added min/max width properties for lesson number, title, status, and actions to ensure consistent display.
- Enhanced CSS properties for table rows to manage text overflow and improve overall user experience.

frontend/src/views/social/VocabCourseView.vue

@@ -252,8 +252,9 @@ export default {
 
 .lessons-table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
   border-spacing: 0;
+  table-layout: fixed;
 }
 
 .lessons-table thead {
@@ -270,20 +271,31 @@ export default {
   letter-spacing: 0.5px;
 }
 
-.lessons-table th.col-number {
+.lessons-table th.col-number,
-  width: 60px;
+.lessons-table td.lesson-number {
+  width: 80px;
+  min-width: 80px;
+  max-width: 80px;
 }
 
-.lessons-table th.col-title {
+.lessons-table th.col-title,
+.lessons-table td.lesson-title {
   width: auto;
+  min-width: 200px;
 }
 
-.lessons-table th.col-status {
+.lessons-table th.col-status,
-  width: 180px;
+.lessons-table td.lesson-status {
-}
-
-.lessons-table th.col-actions {
   width: 200px;
+  min-width: 200px;
+  max-width: 200px;
+}
+
+.lessons-table th.col-actions,
+.lessons-table td.lesson-actions {
+  width: 250px;
+  min-width: 250px;
+  max-width: 250px;
 }
 
 .lessons-table tbody tr {
@@ -330,6 +342,9 @@ export default {
   align-items: flex-start;
   justify-content: center;
   min-height: 60px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .badge.completed {