Improve progress dot layout for extra courses

app/styles/courses/teacher-classes-view.sass

@@ -38,6 +38,18 @@
       padding: 20px
       display: flex
       
+      .flex-right
+        display: flex
+        flex-grow: 1
+        justify-content: flex-end
+
+      .progress-col
+        display: flex
+        align-self: center
+        align-items: center
+        flex-wrap: wrap
+        justify-content: flex-end
+
   .class:nth-child(2n+1)
     background-color: #ebebeb
 
@@ -46,38 +58,26 @@
     
   .view-class-arrow
     color: $gray-darker
-    // height: 100%
     font-size: 35px
     line-height: 35px
+    margin-left: 15px
     align-self: center
     .view-class-arrow-inner
       color: $gray-light
       &:hover
         text-decoration: none
       
-  .progress-col
-    display: flex
-    align-self: center
-    align-items: center
-    
   .progress-dot
     display: inline-block
-    margin-right: 20px
+    margin: 10px
     width: 62px
     height: 62px
     border-radius: 50%
-    margin-top: 23px
-    margin-bottom: 23px
     background: $gray-light
-    position: relative
+    display: flex
+    justify-content: center
+    align-items: center
     .dot-label
-      color: $gray-dark
-      position: absolute
-      left: 50%
-      top: 50%
-      .text-h6
-        margin-left: -50%
-        margin-top: -50%
       color: white
     
   .progress-dot.forest

app/templates/courses/teacher-classes-view.jade

@@ -54,7 +54,7 @@ block content
 
 mixin classRow(classroom)
   .class.row
-    .col-xs-6
+    .class-details-col
       .text-h4.semibold
         = classroom.get('name')
       .language.small
@@ -72,7 +72,8 @@ mixin classRow(classroom)
         a.edit-classroom.text-h6(data-i18n='teacher.edit_class_settings' data-classroom-id=classroom.id data-event-action="Teachers Classes Edit Class Started")
         a.archive-classroom.text-h6(data-i18n='teacher.archive_class' data-classroom-id=classroom.id data-event-action="Teachers Classes Archive Class")
 
-    .progress-col.col-xs-5
+    .flex-right
+      .progress-col
         if classroom.get('members').length == 0
           +addStudentsButton(classroom)
         else
@@ -83,7 +84,7 @@ mixin classRow(classroom)
             if view.courseInstances.findWhere({ classroomID: classroom.id, courseID: course.id })
               - var label = courseLabelsArray[index];
               +progressDot(classroom, course, label)
-    .view-class-arrow.col-xs-1
+      .view-class-arrow
         a.view-class-arrow-inner.glyphicon.glyphicon-chevron-right.view-class-btn(data-classroom-id=classroom.id data-event-action="Teachers Classes View Class Chevron")
 
 
@@ -118,8 +119,7 @@ mixin progressDot(classroom, course, label)
     +progressDotLabel(label)
 
 mixin progressDotLabel(label)
-  .dot-label
-    .text-h6= label
+  .dot-label.text-h6= label
 
 mixin archivedClassRow(classroom)
   .class.row