From cf77cd66654beee1aecbbafb1c3dff37288d22b4 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Mon, 20 Jun 2022 18:46:54 +0800
Subject: [PATCH] MDL-74812 gradingform_rubric: Fix text overlap in rubric
 levels

---
 .../form/rubric/lang/en/gradingform_rubric.php  |  2 +-
 grade/grading/form/rubric/renderer.php          |  4 ++--
 theme/boost/scss/moodle/grade.scss              |  4 ----
 theme/boost/style/moodle.css                    | 17 ++++++-----------
 theme/classic/style/moodle.css                  | 17 ++++++-----------
 5 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/grade/grading/form/rubric/lang/en/gradingform_rubric.php b/grade/grading/form/rubric/lang/en/gradingform_rubric.php
index 2e7f0ad6ab3..5fb170ab708 100644
--- a/grade/grading/form/rubric/lang/en/gradingform_rubric.php
+++ b/grade/grading/form/rubric/lang/en/gradingform_rubric.php
@@ -86,7 +86,7 @@ $string['save'] = 'Save';
 $string['saverubric'] = 'Save rubric and make it ready';
 $string['saverubricdraft'] = 'Save as draft';
 $string['scoreinputforlevel'] = 'Score input for level {$a}';
-$string['scorepostfix'] = '{$a}points';
+$string['scorepostfix'] = '{$a} points';
 $string['showdescriptionstudent'] = 'Display rubric description to those being graded';
 $string['showdescriptionteacher'] = 'Display rubric description during evaluation';
 $string['showremarksstudent'] = 'Show remarks to those being graded';
diff --git a/grade/grading/form/rubric/renderer.php b/grade/grading/form/rubric/renderer.php
index 4eedbdc98a7..a4e7ba53b3c 100644
--- a/grade/grading/form/rubric/renderer.php
+++ b/grade/grading/form/rubric/renderer.php
@@ -225,7 +225,7 @@ class gradingform_rubric_renderer extends plugin_renderer_base {
         // Template for one level within one criterion
         $tdattributes = array(
             'id' => '{NAME}-criteria-{CRITERION-id}-levels-{LEVEL-id}',
-            'class' => 'level' . $level['class']
+            'class' => 'text-break level' . $level['class']
         );
         if (isset($level['tdwidth'])) {
             $tdattributes['style'] = "width: " . round($level['tdwidth']).'%;';
@@ -319,7 +319,7 @@ class gradingform_rubric_renderer extends plugin_renderer_base {
             $displayscore = false;
         }
         if ($displayscore) {
-            $scoreclass = 'score';
+            $scoreclass = 'score d-inline';
             if (isset($level['error_score'])) {
                 $scoreclass .= ' error';
             }
diff --git a/theme/boost/scss/moodle/grade.scss b/theme/boost/scss/moodle/grade.scss
index a272f6da92d..fe40f8b4036 100644
--- a/theme/boost/scss/moodle/grade.scss
+++ b/theme/boost/scss/moodle/grade.scss
@@ -141,14 +141,11 @@
         }
 
         .score {
-            position: relative;
-            float: left;
             margin-top: 5px;
             margin-right: 28px;
             font-style: italic;
             font-weight: bold;
             color: #{theme-color-level('success', 2)};
-            white-space: nowrap;
 
             input {
                 margin-bottom: 0;
@@ -193,7 +190,6 @@
         }
 
         .scorevalue {
-            padding-right: 5px;
             input {
                 // Should handle at least three chars with room to spare.
                 float: none;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 803c80d2437..b97731a6f8c 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -19387,14 +19387,11 @@ p.arrow_button {
     width: 80%;
     margin-bottom: 0; }
   .gradingform_rubric .criterion .score {
-    position: relative;
-    float: left;
     margin-top: 5px;
     margin-right: 28px;
     font-style: italic;
     font-weight: bold;
-    color: #2d662a;
-    white-space: nowrap; }
+    color: #2d662a; }
     .gradingform_rubric .criterion .score input {
       margin-bottom: 0; }
   .gradingform_rubric .criterion .level {
@@ -19422,13 +19419,11 @@ p.arrow_button {
         margin: 0; }
         .gradingform_rubric .criterion .level .delete input:hover {
           background-color: #ddd; }
-  .gradingform_rubric .criterion .scorevalue {
-    padding-right: 5px; }
-    .gradingform_rubric .criterion .scorevalue input {
-      float: none;
-      width: 2em; }
-      .gradingform_rubric .criterion .scorevalue input.hiddenelement, .gradingform_rubric .criterion .scorevalue input.pseudotablink {
-        width: 0; }
+  .gradingform_rubric .criterion .scorevalue input {
+    float: none;
+    width: 2em; }
+    .gradingform_rubric .criterion .scorevalue input.hiddenelement, .gradingform_rubric .criterion .scorevalue input.pseudotablink {
+      width: 0; }
   .gradingform_rubric .criterion .addlevel {
     vertical-align: top;
     padding-top: 6px; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 059828603d1..a33ba309350 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -19387,14 +19387,11 @@ p.arrow_button {
     width: 80%;
     margin-bottom: 0; }
   .gradingform_rubric .criterion .score {
-    position: relative;
-    float: left;
     margin-top: 5px;
     margin-right: 28px;
     font-style: italic;
     font-weight: bold;
-    color: #2d662a;
-    white-space: nowrap; }
+    color: #2d662a; }
     .gradingform_rubric .criterion .score input {
       margin-bottom: 0; }
   .gradingform_rubric .criterion .level {
@@ -19422,13 +19419,11 @@ p.arrow_button {
         margin: 0; }
         .gradingform_rubric .criterion .level .delete input:hover {
           background-color: #ddd; }
-  .gradingform_rubric .criterion .scorevalue {
-    padding-right: 5px; }
-    .gradingform_rubric .criterion .scorevalue input {
-      float: none;
-      width: 2em; }
-      .gradingform_rubric .criterion .scorevalue input.hiddenelement, .gradingform_rubric .criterion .scorevalue input.pseudotablink {
-        width: 0; }
+  .gradingform_rubric .criterion .scorevalue input {
+    float: none;
+    width: 2em; }
+    .gradingform_rubric .criterion .scorevalue input.hiddenelement, .gradingform_rubric .criterion .scorevalue input.pseudotablink {
+      width: 0; }
   .gradingform_rubric .criterion .addlevel {
     vertical-align: top;
     padding-top: 6px; }