Merge pull request #15925 from edx/ibrahimahmed443/WL-1186-program-dashboard-layout-update

Program dashboard page layout update

lms/static/sass/views/_program-details.scss

@@ -442,7 +442,7 @@
         }
 
         .course-details {
-            float: none;
+            float: left;
 
             .course-title { 
                 font-size: 1em;
@@ -467,13 +467,20 @@
                 display: table;
                 width: 100%;
             }
+            .course-content {
+                overflow: hidden;
+            }
         }
 
         .course-details {
+            width: 100%;
+            float: none;
             @media(min-width: $bp-screen-md) {
                 display: table-cell;
                 vertical-align: top;
                 padding: 0 10px 0 0;
+                float: left;
+                width: calc(100% - 205px);
             }
         }
 
@@ -481,6 +488,7 @@
             @media(min-width: $bp-screen-md) {
                 width: 200px;
                 text-align: right;
+                float: right;
             }
 
             .course-enroll-view {

lms/templates/learner_dashboard/course_card.underscore

 <div class="section">
     <div class="course-meta-container">
+        <div class="course-content">
             <div class="course-details">
                 <h5 class="course-title">
                     <% if ( marketing_url || course_url ) { %>
@@ -20,6 +21,7 @@
                 </div>
             </div>
             <div class="course-actions"></div>
+        </div>
         <div class="course-certificate certificate-status"></div>
     </div>
 </div>