diff --git a/mod/quiz/classes/output/renderer.php b/mod/quiz/classes/output/renderer.php
index 798bc67157f..b1c159d9e05 100644
--- a/mod/quiz/classes/output/renderer.php
+++ b/mod/quiz/classes/output/renderer.php
@@ -386,14 +386,16 @@ class renderer extends plugin_renderer_base {
             $qnostring = 'questionnonavinfo';
         }
 
+        $tooltip = get_string('questionx', 'question', s($button->number)) . ' - ' . $button->statestring;
+
         $a = new stdClass();
-        $a->number = $button->number;
+        $a->number = s($button->number);
         $a->attributes = implode(' ', $extrainfo);
         $tagcontents = html_writer::tag('span', '', ['class' => 'thispageholder']) .
                 html_writer::tag('span', '', ['class' => 'trafficlight']) .
                 get_string($qnostring, 'quiz', $a);
         $tagattributes = ['class' => implode(' ', $classes), 'id' => $button->id,
-                'title' => $button->statestring, 'data-quiz-page' => $button->page];
+                'title' => $tooltip, 'data-quiz-page' => $button->page];
 
         if ($button->url) {
             return html_writer::link($button->url, $tagcontents, $tagattributes);
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index 0a8f9f2d554..92621404b0f 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -1248,7 +1248,8 @@ img.userpicture {
         width: 30px;
         border-radius: 3px;
         border: 0;
-        overflow: visible;
+        overflow: hidden;
+        white-space: nowrap;
         margin: 0 6px 6px 0;
     }
 
diff --git a/theme/boost/scss/moodle/question.scss b/theme/boost/scss/moodle/question.scss
index ef6873bc0fa..2186c7f9ab0 100644
--- a/theme/boost/scss/moodle/question.scss
+++ b/theme/boost/scss/moodle/question.scss
@@ -269,6 +269,7 @@ body.path-question-type {
 .que span.qno {
     font-size: 1.5em;
     font-weight: bold;
+    word-break: break-word;
 }
 
 .que .info > div {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index d2003b6f138..1108e0f4aca 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -31370,6 +31370,7 @@ body.path-question-type .form-group .col-form-label.sr-only:not(legend):not([for
 .que span.qno {
   font-size: 1.5em;
   font-weight: bold;
+  word-break: break-word;
 }
 
 .que .info > div {
@@ -33734,7 +33735,8 @@ img.userpicture {
   width: 30px;
   border-radius: 3px;
   border: 0;
-  overflow: visible;
+  overflow: hidden;
+  white-space: nowrap;
   margin: 0 6px 6px 0;
 }
 .path-mod-quiz #mod_quiz_navblock span.qnbutton {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 9f460bf5cd8..1478a611f2d 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -31370,6 +31370,7 @@ body.path-question-type .form-group .col-form-label.sr-only:not(legend):not([for
 .que span.qno {
   font-size: 1.5em;
   font-weight: bold;
+  word-break: break-word;
 }
 
 .que .info > div {
@@ -33734,7 +33735,8 @@ img.userpicture {
   width: 30px;
   border-radius: 3px;
   border: 0;
-  overflow: visible;
+  overflow: hidden;
+  white-space: nowrap;
   margin: 0 6px 6px 0;
 }
 .path-mod-quiz #mod_quiz_navblock span.qnbutton {