From cf3f47c67775fa579345e1d7b36ded73b641759e Mon Sep 17 00:00:00 2001
From: Axel Lo <54468493+RheuX@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:05:10 -0800
Subject: [PATCH] courses: smoother steps preview title (fixes #7868) (#7879)

Co-authored-by: mutugiii <mutugimutuma@gmail.com>
Co-authored-by: dogi <dogi@users.noreply.github.com>
---
 package.json                                  |  2 +-
 .../view-courses/courses-view.component.html  |  2 +-
 .../courses/view-courses/courses-view.scss    | 26 ++++++++++++++++---
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 05e6afc14e..5a3593831e 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.82",
+  "version": "0.15.83",
   "myplanet": {
     "latest": "v0.21.28",
     "min": "v0.20.28"
diff --git a/src/app/courses/view-courses/courses-view.component.html b/src/app/courses/view-courses/courses-view.component.html
index b6eedb7993..3e33f0bd70 100644
--- a/src/app/courses/view-courses/courses-view.component.html
+++ b/src/app/courses/view-courses/courses-view.component.html
@@ -65,7 +65,7 @@ <h3 class="margin-lr-3 ellipsis-title">{{courseDetail.courseTitle}}</h3>
         <ng-container *ngFor="let step of courseDetail.steps; let stepNum = index; trackBy: trackBySteps">
           <mat-expansion-panel hideToggle="true" (opened)="setStepButtonStatus(step, stepNum)">
             <mat-expansion-panel-header>
-              <mat-panel-title i18n>
+              <mat-panel-title class="step-title" i18n>
                 {{step.stepTitle || 'Step ' + (stepNum + 1)}}
               </mat-panel-title>
               <mat-panel-description>
diff --git a/src/app/courses/view-courses/courses-view.scss b/src/app/courses/view-courses/courses-view.scss
index 5b8d6caa87..5db279dfb1 100644
--- a/src/app/courses/view-courses/courses-view.scss
+++ b/src/app/courses/view-courses/courses-view.scss
@@ -47,10 +47,30 @@
       grid-template-columns: 1fr;
       grid-template-rows: 0 1fr;
     } 
+    
+  }
+}
 
-    .course-detail, .course-view {
-      overflow: visible;
-    }
+mat-expansion-panel-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+mat-panel-title {
+  display: block;
+}
+
+.step-title {
+  max-width: 150ch;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  @media (max-width: $screen-md) {
+    max-width: 90ch;
   }
 
+  @media (max-width: $screen-sm) {
+    max-width: 45ch;
+  }
 }