From c584b9ae1367efceb9a4544907336bfbb597b8d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 9 Nov 2018 11:28:01 +0100
Subject: [PATCH] MOBILE-2716 course: Fix section selector lenght

---
 src/app/app.scss                                          | 1 +
 src/core/course/components/format/core-course-format.html | 4 ++--
 src/core/course/components/format/format.scss             | 7 +++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/app.scss b/src/app/app.scss
index 9087be361..48cb44c71 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -449,6 +449,7 @@ ion-app.app-root {
     white-space: normal;
     align-self: start;
     max-width: none;
+    @include text-align('start');
 
     &.select-md,
     &.button-md {
diff --git a/src/core/course/components/format/core-course-format.html b/src/core/course/components/format/core-course-format.html
index de9a9ad44..8ecd177d8 100644
--- a/src/core/course/components/format/core-course-format.html
+++ b/src/core/course/components/format/core-course-format.html
@@ -20,9 +20,9 @@
         <!-- Section selector. -->
         <core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
             <div text-wrap *ngIf="displaySectionSelector && sections && sections.length" padding class="clearfix" ion-row justify-content-between>
-                <button float-start ion-button icon-start (click)="showSectionSelector($event)" color="light" class="core-button-select button-no-uppercase" ion-col>
+                <button float-start ion-button icon-start icon-end (click)="showSectionSelector($event)" color="light" class="core-button-select button-no-uppercase" ion-col>
                     <core-icon name="fa-folder"></core-icon>
-                    {{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}
+                    <span class="core-section-selector-text">{{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}</span>
                     <ion-icon name="arrow-dropdown" ios="md-arrow-dropdown"></ion-icon>
                 </button>
                 <!-- Section download. -->
diff --git a/src/core/course/components/format/format.scss b/src/core/course/components/format/format.scss
index 16737be20..3639d394c 100644
--- a/src/core/course/components/format/format.scss
+++ b/src/core/course/components/format/format.scss
@@ -6,6 +6,13 @@ ion-app.app-root ion-badge.core-course-download-section-progress {
 
 ion-app.app-root core-course-format {
 
+    button.core-button-select .core-section-selector-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 2em;
+        white-space: nowrap;
+    }
+
     .core-format-progress-list {
         margin-bottom: 0;