MDL-76150 gradereport_grader: some style changes

- Table cells are top-aligned
- Cell paddings changed to 10px
- In the header row, the user detail cells don't wrap but other cells do
- Grade item names wrap when they are long
- Action menu button for the grade cells does not go to the next line
  when the cell is not in the header row
- Heading cells in the footer row are right aligned

grade/report/grader/styles.css

@@ -24,14 +24,8 @@
     border: 1px solid #ccc;
     border-top-width: 0;
     border-left-width: 0;
-    padding: 4px 5px;
-    vertical-align: middle;
-    text-align: center;
-    white-space: nowrap;
-}
-
-.path-grade-report-grader .action-menu {
-    display: inline-block;
+    padding: 10px;
+    vertical-align: top;
 }
 
 .path-grade-report-grader .overriddengrade {
@@ -49,6 +43,14 @@
     color: #ca3120;
 }
 
+.path-grade-report-grader .gradecell {
+    white-space: nowrap;
+}
+
+.path-grade-report-grader .gradecell > * {
+    white-space: normal;
+}
+
 .path-grade-report-grader .grade_icons {
     text-align: center;
 }
@@ -72,37 +74,26 @@
 .path-grade-report-grader .gradeparent .user.cell {
     font-size: 14px;
     font-weight: normal;
-    text-align: left;
+}
+
+.path-grade-report-grader .gradeparent .heading .header,
+.path-grade-report-grader .gradeparent .heading .userfield {
+    white-space: nowrap;
 }
 
 /**
  * The user cells.
  */
 .path-grade-report-grader .gradeparent .user.cell {
-    min-width: 250px;
-    width: 250px;
-    white-space: normal;
-    vertical-align: middle;
+    white-space: nowrap;
     height: 100px;
 }
 
 .path-grade-report-grader .gradeparent .highlightable.cell {
     height: 80px;
-    text-align: center;
-    vertical-align: top;
-    padding-top: 20px;
     min-width: 150px;
 }
 
-.path-grade-report-grader .gradeparent .gradecell {
-    vertical-align: top;
-    padding-top: 20px;
-}
-
-.path-grade-report-grader .gradeparent .locked {
-    padding-top: 27px;
-}
-
 .path-grade-report-grader .gradeparent .user.cell .userpicture {
     border: none;
     vertical-align: middle;
@@ -116,20 +107,14 @@
     vertical-align: middle;
 }
 
-/**
- * The additional user fields.
- */
-.path-grade-report-grader .gradeparent .userfield {
-    font-weight: normal;
-    text-align: left;
-}
-
 /**
  * The footer's header.
  */
 .path-grade-report-grader .gradeparent .range .header,
-.path-grade-report-grader .gradeparent .avg .header {
+.path-grade-report-grader .gradeparent .avg .header,
+.path-grade-report-grader .gradeparent .groupavg .header {
     font-weight: bold;
+    text-align: right;
 }
 
 /**
@@ -139,15 +124,6 @@
     border-top-width: 1px;
 }
 
-/**
- * The footer's cells.
- */
-.path-grade-report-grader .gradeparent .avg .cell {
-    text-align: right;
-    max-width: 200px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
 /**
  * Content styling.
  */
@@ -200,6 +176,11 @@
     text-align: center;
 }
 
+.path-grade-report-grader .action-menu {
+    display: inline-block;
+    padding-left: 10px;
+}
+
 .path-grade-report-grader .dropdown-menu {
     width: max-content;
 }