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.

Author: Kevinjil

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) => {

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">