diff --git a/mod/assign/styles.css b/mod/assign/styles.css
index c838143e575..003655e78bc 100644
--- a/mod/assign/styles.css
+++ b/mod/assign/styles.css
@@ -419,6 +419,14 @@
 .path-mod-assign [data-region="grading-navigation"] {
     padding: 1em;
 }
+.path-mod-assign [data-region="assignment-info"] {
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
+.path-mod-assign [data-region="assignment-info"] small[data-region="assignment-tooltip"] {
+    margin-left: 0.5em;
+}
 
 .path-mod-assign [data-region="user-info"] {
     height: 60px;
diff --git a/mod/assign/templates/grading_navigation.mustache b/mod/assign/templates/grading_navigation.mustache
index 93f5093d062..6a4e49a79c5 100644
--- a/mod/assign/templates/grading_navigation.mustache
+++ b/mod/assign/templates/grading_navigation.mustache
@@ -31,13 +31,29 @@
     Example context (json):
     This template includes ajax functionality, so it cannot be shown in the template library.
 }}
+
 <div data-region="grading-navigation" class="row-fluid">
+
+{{!
+    There are three chunks, which appear side-by-side at large screen sizes.
+    A) Assignment info, which has 3 rows:
+}}
+
 <div data-region="assignment-info" class="span4">
+
+{{!
+    Row 1) course name & link.
+}}
 <a href="{{config.wwwroot}}/course/view.php?id={{courseid}}">{{{coursename}}}</a><br/>
+
+{{!
+    Row 2) Assignment name & link.
+}}
 <a href="{{config.wwwroot}}/mod/assign/view.php?id={{cmid}}">{{name}}</a>
-{{#caneditsettings}}
-<a href="{{config.wwwroot}}/course/modedit.php?update={{cmid}}&return=1">{{#pix}}t/edit, core,{{#str}}editsettings{{/str}}{{/pix}}</a>
-{{/caneditsettings}}
+
+{{!
+    Row 3) Edit settings, due date, with tool-tip thing.
+}}
 <div role="tooltip" id="tooltip-{{uniqid}}" class="accesshide">
 {{#duedate}}
 {{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}
@@ -51,14 +67,27 @@
 <br>{{timeremainingstr}}
 {{/duedate}}
 </div>
+
+<br/>
+{{#caneditsettings}}
+<a href="{{config.wwwroot}}/course/modedit.php?update={{cmid}}&return=1">{{#pix}}t/edit, core,{{#str}}editsettings{{/str}}{{/pix}}</a>
+{{/caneditsettings}}
 {{#duedate}}
-<br/><small data-region="assignment-tooltip" aria-describedby="tooltip-{{uniqid}}">{{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}</small>
+<small data-region="assignment-tooltip" aria-describedby="tooltip-{{uniqid}}">{{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}</small>
 {{/duedate}}
 </span>
 </div>
+
+{{!
+    B) Current user name and info.
+}}
 <div data-region="user-info" class="span4" data-assignmentid="{{assignmentid}}" data-groupid="{{groupid}}">
     {{> mod_assign/grading_navigation_user_info }}
 </div>
+
+{{!
+    C) User selector widget.
+}}
 <div data-region="user-selector" class="span4">
     <div class="alignment">
         {{> mod_assign/grading_navigation_user_selector }}