MDL-64236 gradereport_grader: Add padding to content in grader report

In certain operative systems the browser's scrollbar may partly cover
the content in the student header and user cells when horizontally
scrolling through the table contents. This is most noticeable when in
RTL mode. Adding slight padding on the left (or right in RTL mode) to
the content in these cells would fix this UI issue.

grade/report/grader/lib.php

@@ -684,7 +684,10 @@ class grade_report_grader extends grade_report {
         $headerrow->attributes['class'] = 'heading';
 
         $studentheader = new html_table_cell();
-        $studentheader->attributes['class'] = 'header';
+        // The browser's scrollbar may partly cover (in certain operative systems) the content in the student header
+        // when horizontally scrolling through the table contents (most noticeable when in RTL mode).
+        // Therefore, add slight padding on the left or right when using RTL mode.
+        $studentheader->attributes['class'] = "header pl-3";
         $studentheader->scope = 'col';
         $studentheader->header = true;
         $studentheader->id = 'studentheader';
@@ -745,6 +748,10 @@ class grade_report_grader extends grade_report {
                 $icon = $OUTPUT->pix_icon('i/enrolmentsuspended', $suspendedstring);
                 $usercell->text .= html_writer::tag('span', $icon, array('class'=>'usersuspendedicon'));
             }
+            // The browser's scrollbar may partly cover (in certain operative systems) the content in the user cells
+            // when horizontally scrolling through the table contents (most noticeable when in RTL mode).
+            // Therefore, add slight padding on the left or right when using RTL mode.
+            $usercell->attributes['class'] .= ' pl-3';
 
             $userrow->cells[] = $usercell;
 

grade/report/grader/styles.css

@@ -79,7 +79,6 @@
 }
 
 .path-grade-report-grader .gradeparent .user.cell .userpicture {
-    margin: 0 4px;
     border: none;
     vertical-align: middle;
 }