Fix(responsive): use CSS for responsive column display

Refactor display logic to use CSS for hiding columns on mobile screens, removing the need for TypeScript-based column management. This addresses the issues in PR #9187.

Author: emmanuelbaa

src/app/courses/courses.component.ts

@@ -212,10 +212,6 @@ export class CoursesComponent implements OnInit, OnChanges, AfterViewInit, OnDes
     this.coursesService.requestCourses(this.parent);
   }
 
-  setDisplayedColumns() {
-    this.displayedColumns = [ 'select', 'courseTitle', 'info', 'createdDate', 'rating' ];
-  }
-
   ngAfterViewInit() {
     this.courses.sort = this.sort;
     this.courses.paginator = this.paginator;

src/app/courses/courses.scss

@@ -76,6 +76,10 @@ $label-height: 1rem;
     max-width: fit-content;
   }
 
+  .mat-column-select {
+    display: none;
+  }
+
   .mat-column-createdDate {
     max-width: fit-content;
   }

src/app/resources/resources.component.ts

@@ -134,7 +134,6 @@ export class ResourcesComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.setDisplayedColumns();
     this.titleSearch = '';
     combineLatest(this.resourcesService.resourcesListener(this.parent), this.userService.shelfChange$).pipe(
       startWith([ [], null ]), skip(1), takeUntil(this.onDestroy$),

src/app/resources/resources.scss

@@ -80,22 +80,25 @@ $label-height: 1rem;
   display: inline-block;
 }
 
-  @media(max-width: $screen-sm) {
-    .resources-list {
-      .mat-column-createdDate {
-        max-width: fit-content;
-      }
-      .mat-column-info {
-        max-width: fit-content;
-      }
+@media(max-width: $screen-sm) {
+  .mat-column-select {
+    display: none;
+  }
 
-    .created-label {
-      display: inline-block;
-    }
+  .mat-column-createdDate {
+    max-width: fit-content;
+  }
 
-    .table-selection-top {
-      display: none;
-    }
+  .mat-column-info {
+    max-width: fit-content;
+  }
+
+  .created-label {
+    display: inline-block;
+  }
+
+  .table-selection-top {
+    display: none;
   }
 
   .mat-header-row {