[FIX] website_slides : Adjust container to contain the full course name

When we have a long course name or we update the font size to something
big (24 px) for example the course name and the progress bar will overflow
outside its container.

Steps to reproduce the error :
1- go to one of the courses and update it's name to make it a bit long
2- click on one of it's content and got website preview
3- you can see that the progress bar is outside the container
4- if not : click edit -> theme -> change font size to 24 px
5- You can see now clearly that there is overflow from the container

The origin of the problem was because the container has fixed height
equals 80px

opw-3191888

closes odoo/odoo#126460

X-original-commit: 8184374450f8e2b775a29ff05b3128c24579bbba
Signed-off-by: Mahdi Cheikh Rouhou (macr) <macr@odoo.com>

addons/website_slides/static/src/js/slides_course_page.js

@@ -32,6 +32,22 @@ export const SlideCoursePage = publicWidget.Widget.extend({
         }
     },
 
+    /**
+     * @override
+     */
+    start: function () {
+        // TODO: we need to clean this code and make the changes in the view in master
+        const $completed = $('.o_wslides_channel_completion_completed');
+        const $progressbar = $('.o_wslides_channel_completion_progressbar');
+        if($progressbar.hasClass('d-none')){
+            $progressbar.removeClass('d-none').addClass('d-flex').addClass('hidden-progressbar-completed-tag');
+        }
+        if($completed.hasClass('d-none')){
+            $completed.removeClass('d-none').addClass('hidden-progressbar-completed-tag');
+        }
+        return this._super.apply(this, arguments)
+    },
+
     /**
      * Greens up the bullet when the slide is completed
      *
@@ -71,12 +87,12 @@ export const SlideCoursePage = publicWidget.Widget.extend({
 
         if (completion < 100) {
             // Hide the "Completed" text and show the progress bar
-            $completed.addClass('d-none');
-            $progressbar.removeClass('d-none').addClass('d-flex');
+            $completed.addClass('hidden-progressbar-completed-tag');
+            $progressbar.removeClass('hidden-progressbar-completed-tag');
         } else {
             // Hide the progress bar and show the "Completed" text
-            $completed.removeClass('d-none');
-            $progressbar.addClass('d-none').removeClass('d-flex');
+            $completed.removeClass('hidden-progressbar-completed-tag');
+            $progressbar.addClass('hidden-progressbar-completed-tag');
         }
 
         $progressbar.find('.progress-bar').css('width', `${completion}%`);

addons/website_slides/static/src/scss/website_slides.scss

@@ -619,10 +619,11 @@ $line-height-truncate: 1.25em;
     }
 }
 
-// Enforce the height of the lesson header, so the DOM element size do not change
-// when the completion progressbar become visible / hidden
-.o_wslides_lesson_header_container {
-    height: 80px;
+.hidden-progressbar-completed-tag {
+    visibility: hidden;
+    @include media-breakpoint-down(sm) {
+        display: none !important;
+    }
 }
 
 .o_wslides_fs_sidebar_section {