courses: smoother steps preview title (fixes #7868) (#7879)

Co-authored-by: mutugiii <[email protected]> Co-authored-by: dogi <[email protected]>
open-learning-exchange · Dec 5, 2024 · cf3f47c · cf3f47c
1 parent f3f0499
commit cf3f47c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;
+  }
 }