Merge pull request #538 from coding-blocks/alignCHeck

Align check

Author: abhishek97

app/pods/components/player/player-section-list-item/template.hbs

@@ -24,12 +24,12 @@
   </div>
   {{#if isOpen}}
     {{#each section.contents as |content|}}
-      <div class="row no-gutters justify-content-between align-items-center py-3">
+      <div class="row no-gutters justify-content-between align-items-center py-2 flex-nowrap">
         <LinkTo 
           class="white content-row {{content.iconClass}} {{if (eq activeContentId content.id) "gradient-text-orange"}}"
           @route="attempt.content"
           @models={{array section.id content.id}}>
-          <span class="normal">{{content.title}}  </span>
+          <span class="normal w-100">{{content.title}}  </span>
         </LinkTo>
         {{#if content.isDone}}
           <FaIcon @icon="check" class="gradient-text-green" />

app/styles/components/player.scss

@@ -7,11 +7,16 @@
     display: inline-block;
     height: 25px;
     width: 25px;
-    margin-right: 1rem;
-    background-size: cover;
+    margin-right: 0.5rem;
+    background-size: contain;
     background-repeat: no-repeat;
   }
 
+  span.normal {
+    word-break: break-word;
+    margin-right: 0.5rem;
+  }
+
   &.quiz-row::before {
     background-image: url('https://minio.codingblocks.com/amoeba/quiz_grey.svg');
   }