Hide "no courses" message when dragging over an empty saved for later.

src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html

@@ -5,6 +5,8 @@
     cdkDropList
     [cdkDropListData]="courses$ | async"
     [cdkDropListConnectedTo]="dropZoneIds$ | async"
+    (cdkDropListEntered)="dragEnter()"
+    (cdkDropListExited)="dragExit()"
     (cdkDropListDropped)="drop($event)">
     <div
       class="course-wrapper"
@@ -17,7 +19,7 @@
       </div>
     </div>
 
-    <div *ngIf="(courses$ | async).length === 0" class="no-courses text-center semi-bold">
+    <div *ngIf="(courses$ | async).length === 0 && !this.hasItemDraggedOver" class="no-courses text-center semi-bold">
       <p class="no-courses text-center semi-bold">No courses saved for later</p>
     </div>
   </div>

src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.ts

@@ -27,6 +27,7 @@ export class SavedForLaterContainerComponent implements OnInit {
   public courses$: Observable<ReadonlyArray<SavedForLaterCourse>>;
   public dropZoneIds$: Observable<string[]>;
   public mobileView: MediaQueryList;
+  public hasItemDraggedOver: boolean;
 
   constructor(
     private store: Store<{ degreePlanner: DegreePlannerState }>,
@@ -36,6 +37,7 @@ export class SavedForLaterContainerComponent implements OnInit {
   }
 
   public ngOnInit() {
+    this.hasItemDraggedOver = false;
     this.dropZoneIds$ = this.store.pipe(
       select(selectors.selectAllVisibleYears),
       utils.yearsToDropZoneIds(),
@@ -80,4 +82,12 @@ export class SavedForLaterContainerComponent implements OnInit {
       );
     }
   }
+
+  dragEnter() {
+    this.hasItemDraggedOver = true;
+  }
+
+  dragExit() {
+    this.hasItemDraggedOver = false;
+  }
 }

src/app/degree-planner/shared/course-item/course-item.component.scss

@@ -37,6 +37,10 @@
     }
   }
 
+  .course-title {
+    white-space: normal;
+  }
+
   .course-title.strikethrough,
   .course-number.strikethrough {
     text-decoration: line-through;