Monaco on mobile

webapp/public/js/domjudge.js

@@ -1459,6 +1459,14 @@ function initDiffEditorTab(editorId, diffId, submissionId, models) {
     const navItem = document.getElementById(`${diffId}-link`);
     const isDeleted = !(submissionId in models);
 
+    // Set breakpoint to bootstrap's md, subtract the 2*1.5rem page padding, 4px borders,
+    // and 1px for difference in inclusion/exclusion of the breakpoint in monaco vs bootstrap.
+    const computedStyle = getComputedStyle(document.body)
+    const breakpointMd = parseInt(computedStyle.getPropertyValue('--bs-breakpoint-md'));
+    const rootPadding = parseInt(computedStyle.fontSize) * 3;
+    const borders = 4;
+    const breakpoint = breakpointMd - rootPadding + borders - 1;
+
     const diffEditor = monaco.editor.createDiffEditor(
         document.getElementById(diffId), {
         scrollbar: {
@@ -1469,7 +1477,10 @@ function initDiffEditorTab(editorId, diffId, submissionId, models) {
         scrollBeyondLastLine: false,
         automaticLayout: true,
         readOnly: true,
+        domReadOnly: true,
         theme: getCurrentEditorTheme(),
+        renderSideBySideInlineBreakpoint: breakpoint,
+        useInlineViewWhenSpaceIsLimited: true,
     });
 
     const updateMode = (diffMode) => {

webapp/templates/jury/partials/submission_diff.html.twig

@@ -35,7 +35,7 @@
                     {%- endfor %}
                 </select>
             </div>
-            <div class="diff-mode btn-group">
+            <div class="diff-mode btn-group d-none d-md-inline-flex">
                 <a href="#" role="button" class="btn btn-secondary btn-sm pe-none" aria-disabled="true"><i class="fas fa-plus-minus"></i></a>
                 {%- for mode_id, mode in diff_modes %}
                     <input type="radio" class="btn-check" name="{{ editor_id }}-mode" id="{{ editor_id }}-{{ mode_id }}" value="{{ mode_id }}" autocomplete="off">

webapp/templates/jury/submission_source.html.twig

@@ -10,23 +10,30 @@
 {% block content %}
     {% set editor_id = "diffw" ~ submission.submitid %}
     <h1>
-        Source code for submission
+        Source
+        <span class="d-none d-md-inline">
+            code for submission
+        </span>
         <a href="{{ path('jury_submission', {submitId: submission.submitid}) }}">s{{ submission.submitid }}</a>
-        {%- if submission.originalSubmission %}
-            (resubmit of
-            <a href="{{ path('jury_submission', {submitId: submission.originalSubmission.submitid}) }}">s{{ submission.originalSubmission.submitid }}</a>)
-        {%- endif %}
-        {% if submission.resubmissions is not empty %}
-            (resubmitted as
-            {%- for resubmission in submission.resubmissions %}
-                <a href="{{ path('jury_submission', {submitId: resubmission.originalSubmission.submitid}) }}">s{{ resubmission.submitid }}</a>
-                {%- if not loop.last -%},{%- endif -%}
-            {%- endfor -%}
-            )
-        {% endif %}
-
+        <span class="d-none d-md-inline">
+            {%- if submission.originalSubmission %}
+                (resubmit of
+                <a href="{{ path('jury_submission', {submitId: submission.originalSubmission.submitid}) }}">s{{ submission.originalSubmission.submitid }}</a>)
+            {%- endif %}
+            {% if submission.resubmissions is not empty %}
+                (resubmitted as
+                {%- for resubmission in submission.resubmissions %}
+                    <a href="{{ path('jury_submission', {submitId: resubmission.originalSubmission.submitid}) }}">s{{ resubmission.submitid }}</a>
+                    {%- if not loop.last -%},{%- endif -%}
+                {%- endfor -%}
+                )
+            {% endif %}
+        </span>
         <span class="diff-title" id="{{editor_id}}-title-diff">
-            and diff to <span class="diff-tag"></span> submission
+            and diff to
+            <span class="d-none d-md-inline">
+                <span class="diff-tag"></span> submission
+            </span>
             <a class="diff-link" href="#"></a>
         </span>
     </h1>