MDL-76150 gradereport_grader: status icons stick to the row's buttom

- There's 20px gap between status icons
- The row height adapt to the content

grade/report/grader/styles.css

@@ -26,6 +26,7 @@
     border-left-width: 0;
     padding: 10px;
     vertical-align: top;
+    height: 1em;
 }
 
 .path-grade-report-grader .overriddengrade {
@@ -43,12 +44,19 @@
     color: #ca3120;
 }
 
-.path-grade-report-grader .gradecell {
+.path-grade-report-grader .grade_icons,
+.path-grade-report-grader .category_grade_icons {
     white-space: nowrap;
+    margin-top: 10px;
+    margin-right: 10px;
 }
 
-.path-grade-report-grader .gradecell > * {
-    white-space: normal;
+.path-grade-report-grader .grade_icons .icon {
+    margin-right: 20px;
+}
+
+.path-grade-report-grader .grade_icons .icon:last-child {
+    margin-right: 0;
 }
 
 .path-grade-report-grader .grade_icons {
@@ -86,7 +94,6 @@
  */
 .path-grade-report-grader .gradeparent .user.cell {
     white-space: nowrap;
-    height: 100px;
 }
 
 .path-grade-report-grader .gradeparent .highlightable.cell {

grade/report/grader/templates/cell.mustache

@@ -33,16 +33,26 @@
         "name": "grade[313][624]"
     }
 }}
-{{#iseditable}}
-    {{#scale}}
-        {{>core_grades/grades/grader/scale}}
-    {{/scale}}
-    {{^scale}}
-        {{>core_grades/grades/grader/input}}
-    {{/scale}}
-{{/iseditable}}
-{{^iseditable}}
-    {{>core_grades/grades/grader/text}}
-{{/iseditable}}
-{{{actionmenu}}}
-{{{statusicons}}}
+<div class="d-flex flex-column h-100">
+    <div class="d-flex">
+        <div class="d-flex flex-grow-1">
+            {{#iseditable}}
+                {{#scale}}
+                    {{>core_grades/grades/grader/scale}}
+                {{/scale}}
+                {{^scale}}
+                    {{>core_grades/grades/grader/input}}
+                {{/scale}}
+            {{/iseditable}}
+            {{^iseditable}}
+                {{>core_grades/grades/grader/text}}
+            {{/iseditable}}
+        </div>
+        <div>
+            {{{actionmenu}}}
+        </div>
+    </div>
+    <div class="d-flex flex-grow-1 align-items-end">
+        {{{statusicons}}}
+    </div>
+</div>

grade/report/grader/templates/headercell.mustache

@@ -27,7 +27,17 @@
         "statusicons": "<div class='grade_icons'><i class='icon fa fa-lock fa-fw text-muted' title='Locked' role='img' aria-label='Locked'></i></div>"
     }
 }}
-{{{headerlink}}}
-{{{arrow}}}
-{{{singleview}}}
-{{{statusicons}}}
+<div class="d-flex flex-column h-100">
+    <div>
+        <div class="d-flex flex-grow-1">
+            {{{headerlink}}}
+            {{{arrow}}}
+        </div>
+        <div>
+            {{{singleview}}}
+        </div>
+    </div>
+    <div class="d-flex flex-grow-1 align-items-end">
+        {{{statusicons}}}
+    </div>
+</div>