From 7dc55fbaa2c2f1f5b1826c276685890a9a390b93 Mon Sep 17 00:00:00 2001
From: Kevin Jilissen <info@kevinjilissen.nl>
Date: Sun, 30 Nov 2025 09:51:16 +0100
Subject: [PATCH 1/3] Disable side-by-side below md breakpoint

Monaco already disabled this on an undefined breakpoint. Align it with
bootstraps breakpoint and also hide the UI element to select the mode.
---
 webapp/public/js/domjudge.js                           | 10 ++++++++++
 .../templates/jury/partials/submission_diff.html.twig  |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/webapp/public/js/domjudge.js b/webapp/public/js/domjudge.js
index 68d8a7373b..221a62a070 100644
--- a/webapp/public/js/domjudge.js
+++ b/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: {
@@ -1470,6 +1478,8 @@ function initDiffEditorTab(editorId, diffId, submissionId, models) {
         automaticLayout: true,
         readOnly: true,
         theme: getCurrentEditorTheme(),
+        renderSideBySideInlineBreakpoint: breakpoint,
+        useInlineViewWhenSpaceIsLimited: true,
     });
 
     const updateMode = (diffMode) => {
diff --git a/webapp/templates/jury/partials/submission_diff.html.twig b/webapp/templates/jury/partials/submission_diff.html.twig
index de391147c4..462abee56f 100644
--- a/webapp/templates/jury/partials/submission_diff.html.twig
+++ b/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">

From 6b48fef65f3a1dacc1c483736573b964da783bec Mon Sep 17 00:00:00 2001
From: Kevin Jilissen <info@kevinjilissen.nl>
Date: Sun, 30 Nov 2025 10:51:05 +0100
Subject: [PATCH 2/3] Mark the DOM as readonly to prevent keyboard popup

You do not want half of your phone screen covered with a keyboard for
readonly files.
---
 webapp/public/js/domjudge.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/public/js/domjudge.js b/webapp/public/js/domjudge.js
index 221a62a070..94afdb825f 100644
--- a/webapp/public/js/domjudge.js
+++ b/webapp/public/js/domjudge.js
@@ -1477,6 +1477,7 @@ function initDiffEditorTab(editorId, diffId, submissionId, models) {
         scrollBeyondLastLine: false,
         automaticLayout: true,
         readOnly: true,
+        domReadOnly: true,
         theme: getCurrentEditorTheme(),
         renderSideBySideInlineBreakpoint: breakpoint,
         useInlineViewWhenSpaceIsLimited: true,

From 085a380d4176aa540bc685adb1f3d72c54eaec88 Mon Sep 17 00:00:00 2001
From: Kevin Jilissen <info@kevinjilissen.nl>
Date: Sun, 30 Nov 2025 11:38:24 +0100
Subject: [PATCH 3/3] Hide less relevant title parts on small displays

---
 .../jury/submission_source.html.twig          | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/webapp/templates/jury/submission_source.html.twig b/webapp/templates/jury/submission_source.html.twig
index dd12005926..b5aa03ff14 100644
--- a/webapp/templates/jury/submission_source.html.twig
+++ b/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>