From 05cbaba8f2954f2c375219ce02416270ef3baff9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 15 Jun 2021 17:12:16 +0200
Subject: [PATCH] MOBILE-3320 style: Fix section download hidden with long
 section names

---
 src/core/components/combobox/combobox.scss      |  2 ++
 .../components/format/core-course-format.html   |  2 +-
 .../course/components/format/format.scss        | 17 +++++++++++------
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss
index a36947dd4..23f0ea977 100644
--- a/src/core/components/combobox/combobox.scss
+++ b/src/core/components/combobox/combobox.scss
@@ -1,6 +1,8 @@
 @import "~theme/globals";
 
 :host {
+    max-width: 100%;
+
     ion-select,
     ion-button {
         --icon-margin: 0 8px;
diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html
index c096739ec..191f9fb11 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -167,7 +167,7 @@
 
 <!-- Template to render a section download button/progress. -->
 <ng-template #sectionDownloadTemplate let-section="section">
-    <div *ngIf="section && downloadEnabled" slot="end" class="core-button-spinner core-section-download">
+    <div *ngIf="section && downloadEnabled" slot="end" class="core-button-spinner">
         <!-- Download progress. -->
         <ion-badge class="core-course-download-section-progress"
             *ngIf="section.isDownloading && section.total > 0 && section.count < section.total" role="progressbar"
diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss
index f5a535adb..2d6ee98e1 100644
--- a/src/core/features/course/components/format/format.scss
+++ b/src/core/features/course/components/format/format.scss
@@ -55,13 +55,18 @@
         }
     }
 
-    .core-section-download.core-button-spinner {
-        display: flex;
-        align-items: center;
-        @include margin-horizontal(10px);
+    .core-section-download {
+        core-combobox {
+            max-width: calc(100% - 64px);
+        }
+        .core-button-spinner {
+            display: flex;
+            align-items: center;
+            @include margin-horizontal(10px);
 
-        ion-badge.core-course-download-courses-progress {
-            @include margin(null, 12px, null, null);
+            ion-badge.core-course-download-courses-progress {
+                @include margin(null, 12px, null, null);
+            }
         }
     }