From ea374622b250cc56880a84240647de94205d2ccb Mon Sep 17 00:00:00 2001
From: Jesse Washburn <142361664+jessewashburn@users.noreply.github.com>
Date: Thu, 12 Dec 2024 18:42:54 -0500
Subject: [PATCH] courses: smoother titles (fixes #7664) (#7922)

Co-authored-by: dogi <dogi@users.noreply.github.com>
---
 package.json                           | 6 +++---
 src/app/courses/courses.component.html | 5 +++--
 src/app/courses/courses.scss           | 4 ++++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e480c6539f..c57a6351fd 100755
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.97",
+  "version": "0.15.98",
   "myplanet": {
-    "latest": "v0.21.34",
-    "min": "v0.20.34"
+    "latest": "v0.21.35",
+    "min": "v0.20.35"
   },
   "scripts": {
     "ng": "ng",
diff --git a/src/app/courses/courses.component.html b/src/app/courses/courses.component.html
index 554f750401..586eb3df19 100644
--- a/src/app/courses/courses.component.html
+++ b/src/app/courses/courses.component.html
@@ -131,8 +131,9 @@ <h3 class="header">
             </ng-container>
             <ng-container *ngTemplateOutlet="headerText"></ng-container>
             <ng-template #headerText>
-              <a *ngIf="!isDialog && !isForm; else newTabLink" [routerLink]="['view', element._id]">{{ element.doc.courseTitle.length > 180 ? element.doc.courseTitle.slice(0, 180) + '...' : element.doc.courseTitle }}</a>
-              <ng-template #newTabLink><a class="cursor-pointer" (click)="openCourseViewDialog(element._id)">{{ element.doc.courseTitle.length > 180 ? element.doc.courseTitle.slice(0, 180) + '...' : element.doc.courseTitle }}</a></ng-template>
+              <a *ngIf="!isDialog && !isForm; else newTabLink" [routerLink]="['view', element._id]" class="break-word">{{ element.doc.courseTitle.length > 180 ? element.doc.courseTitle.slice(0, 180) + '...' : element.doc.courseTitle }}</a>
+            <ng-template #newTabLink><a class="cursor-pointer break-word" (click)="openCourseViewDialog(element._id)">{{ element.doc.courseTitle.length > 180 ? element.doc.courseTitle.slice(0, 180) + '...' : element.doc.courseTitle }}</a>
+            </ng-template>
               <span *ngIf="!parent && !isDialog" [ngClass]="{ 'cursor-pointer': !isForm }">
                 <mat-icon class="margin-lr-3" i18n-matTooltip matTooltip="In myCourses" [inline]="true" *ngIf="element.admission" (click)="courseToggle(element._id, 'resign')">bookmark</mat-icon>
                 <mat-icon class="margin-lr-3" i18n-matTooltip matTooltip="Not in myCourses" [inline]="true" *ngIf="!element.admission && element.doc.steps.length" (click)="courseToggle(element._id, 'admission')">bookmark_border</mat-icon>
diff --git a/src/app/courses/courses.scss b/src/app/courses/courses.scss
index 6ec414dfe1..efe18f5943 100644
--- a/src/app/courses/courses.scss
+++ b/src/app/courses/courses.scss
@@ -55,6 +55,10 @@ $label-height: 1rem;
   height: $toolbar-height;
 }
 
+.break-word {
+  word-break: break-word;
+}
+
 @media(max-width: $screen-md) {
   .mat-column-info {
     max-width: 120px;