diff --git a/grade/report/grader/styles.css b/grade/report/grader/styles.css
index f70f612c9ef..ff27213edb4 100644
--- a/grade/report/grader/styles.css
+++ b/grade/report/grader/styles.css
@@ -158,9 +158,8 @@
 }
 
 .path-grade-report-grader .gradeparent .sorticon {
-    margin-left: 5px;
     vertical-align: middle;
-    margin-right: 1px;
+    margin: 0;
 }
 
 .path-grade-report-grader .gradeparent td.grade_type_value,
diff --git a/grade/report/grader/templates/headercell.mustache b/grade/report/grader/templates/headercell.mustache
index 9f496962829..8627158d2d7 100644
--- a/grade/report/grader/templates/headercell.mustache
+++ b/grade/report/grader/templates/headercell.mustache
@@ -34,7 +34,9 @@
     <div class="d-flex" data-collapse="content">
         <div class="d-flex flex-grow-1">
             {{{headerlink}}}
-            {{{arrow}}}
+            <div class="mx-2 mt-2">
+                {{{arrow}}}
+            </div>
         </div>
         <div>
             {{{singleview}}}
diff --git a/grade/report/lib.php b/grade/report/lib.php
index 02e9436e37d..063cda31fa2 100644
--- a/grade/report/lib.php
+++ b/grade/report/lib.php
@@ -598,7 +598,13 @@ abstract class grade_report {
         $matrix = ['up' => 'desc', 'down' => 'asc'];
         $strsort = get_string($matrix[$direction], 'moodle');
         $arrow = $OUTPUT->pix_icon($pix[$direction], '', '', ['class' => 'sorticon']);
-        return html_writer::link($sortlink, $arrow, ['title' => $strsort, 'aria-label' => $strsort, 'data-collapse' => 'sort']);
+
+        if (!empty($sortlink)) {
+            $sortlink->param('sort', ($direction == 'up' ? 'asc' : 'desc'));
+        }
+
+        return html_writer::link($sortlink, $arrow, ['title' => $strsort, 'aria-label' => $strsort, 'data-collapse' => 'sort',
+            'class' => 'arrow_link py-1']);
     }
 
     /**