Fixed highlighted lines in code blocks being cutoff on mobile

Author: squidfunk

Diff for: material/templates/assets/javascripts/bundle.b4d6038a.min.js renamed to material/templates/assets/javascripts/bundle.ae821067.min.js

@@ -249,7 +249,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.b4d6038a.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.ae821067.min.js' | url }}"></script>
       {% for script in config.extra_javascript %}
         {{ script | script_tag }}
       {% endfor %}

Diff for: material/templates/assets/javascripts/bundle.b4d6038a.min.js.map renamed to material/templates/assets/javascripts/bundle.ae821067.min.js.map

@@ -42,6 +42,7 @@ import {
 import { feature } from "~/_"
 import {
   getElementContentSize,
+  getElements,
   watchElementSize,
   watchElementVisibility
 } from "~/browser"
@@ -226,6 +227,14 @@ export function mountCodeBlock(
       }
     }
 
+    // If the code block has line spans, we can add this additional class to
+    // the code block element, which fixes the problem for highlighted code
+    // lines not stretching to the entirety of the screen when the code block
+    // overflows, e.g., on mobile - see
+    const spans = getElements(":scope > span[id]", el)
+    if (spans.length)
+      el.classList.add("md-code__content")
+
     /* Create and return component */
     return watchCodeBlock(el)
       .pipe(