From c11a90acab6a6785435be0eb470cb54ba5ba3ad3 Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Thu, 3 Jun 2021 11:08:27 +0200
Subject: [PATCH] MDL-71366 core_question: prevent question options overflow

---
 question/type/multichoice/renderer.php |  2 +-
 theme/boost/scss/moodle/core.scss      | 22 ++++++++++++++++++++++
 theme/boost/style/moodle.css           | 15 +++++++++++++++
 theme/classic/style/moodle.css         | 15 +++++++++++++++
 4 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/question/type/multichoice/renderer.php b/question/type/multichoice/renderer.php
index e9cec516fa1..3c22b3d3fd1 100644
--- a/question/type/multichoice/renderer.php
+++ b/question/type/multichoice/renderer.php
@@ -145,7 +145,7 @@ abstract class qtype_multichoice_renderer_base extends qtype_with_combined_feedb
         $result .= html_writer::tag('div', $question->format_questiontext($qa),
                 array('class' => 'qtext'));
 
-        $result .= html_writer::start_tag('div', array('class' => 'ablock'));
+        $result .= html_writer::start_tag('div', array('class' => 'ablock no-overflow visual-scroll-x'));
         if ($question->showstandardinstruction == 1) {
             $result .= html_writer::tag('div', $this->prompt(), array('class' => 'prompt'));
         }
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index e5b97391416..e1118f9e764 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2747,3 +2747,25 @@ $picker-emojis-per-row: 7 !default;
 .core_payment_gateways_modal .custom-control-label::after {
     top: 45%;
 }
+
+$scrollbar-thumb: $primary;
+$scrollbar-track: lighten($primary, 40%);
+// simple scrollbars
+.visual-scroll-x {
+    scrollbar-width: thin;
+    scrollbar-color: $scrollbar-thumb $scrollbar-track;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    &::-webkit-scrollbar {
+        height: 8px; // for horizontal scrollbars
+        -webkit-appearance: none;
+        appearance: none;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: $scrollbar-thumb;
+        border-right: $border-width solid $white;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: $scrollbar-track;
+        border-right: $border-width solid $white;
+    }
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 0539a8e57bc..0d148d3edda 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11914,6 +11914,21 @@ input[disabled] {
 .core_payment_gateways_modal .custom-control-label::after {
   top: 45%; }
 
+.visual-scroll-x {
+  scrollbar-width: thin;
+  scrollbar-color: #0f6fc5 #a8d2f8;
+  -ms-overflow-style: -ms-autohiding-scrollbar; }
+  .visual-scroll-x::-webkit-scrollbar {
+    height: 8px;
+    -webkit-appearance: none;
+    appearance: none; }
+  .visual-scroll-x::-webkit-scrollbar-thumb {
+    background-color: #0f6fc5;
+    border-right: 1px solid #fff; }
+  .visual-scroll-x::-webkit-scrollbar-track {
+    background-color: #a8d2f8;
+    border-right: 1px solid #fff; }
+
 .icon {
   font-size: 16px;
   width: 16px;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index cdbdf87f5ec..794868c3592 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -12135,6 +12135,21 @@ input[disabled] {
 .core_payment_gateways_modal .custom-control-label::after {
   top: 45%; }
 
+.visual-scroll-x {
+  scrollbar-width: thin;
+  scrollbar-color: #0f6fc5 #a8d2f8;
+  -ms-overflow-style: -ms-autohiding-scrollbar; }
+  .visual-scroll-x::-webkit-scrollbar {
+    height: 8px;
+    -webkit-appearance: none;
+    appearance: none; }
+  .visual-scroll-x::-webkit-scrollbar-thumb {
+    background-color: #0f6fc5;
+    border-right: 1px solid #fff; }
+  .visual-scroll-x::-webkit-scrollbar-track {
+    background-color: #a8d2f8;
+    border-right: 1px solid #fff; }
+
 .icon {
   font-size: 16px;
   width: 16px;