diff --git a/mod/quiz/classes/output/renderer.php b/mod/quiz/classes/output/renderer.php
index 2a293ff197a..c3281f3d5dd 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 9dad5a2d57a..a5bf743261d 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -31371,6 +31371,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 {
@@ -33735,7 +33736,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 adcaabb9922..f40e9fc48c1 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -31371,6 +31371,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 {
@@ -33735,7 +33736,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 {