diff --git a/webapp/public/js/domjudge.js b/webapp/public/js/domjudge.js index 68d8a7373b..94afdb825f 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: { @@ -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) => { 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 %} -