From 2e1ae9838ceac4a3b2bd03bf70d60253112b3d91 Mon Sep 17 00:00:00 2001 From: Kevin Jilissen Date: Sat, 22 Nov 2025 11:03:49 +0100 Subject: [PATCH 1/3] Add option to stretch the body to the full height Using CSS flexboxes, we can stretch the document body to the full height. For doing so, we will need to use a flexbox layout from some element of which we know the desired minimal height up to the element in the DOM tree which should stretch. We achieve the stretching by defining the minimum height of the body to be 100 viewport height units and adding the `flex-pass` class to all elements in between. The `flex-pass` class sets the display method of the element to be a flexbox to allow stretching of the children, and sets its own grow and shrink to 1. To counter some rounding error encountered in Gecko and derived (firefox) browsers, we subtract 1 pixel from the full viewport height to prevent a minimal 1 pixel scrollbar. --- webapp/public/style_domjudge.css | 18 ++++++++++++++++++ webapp/templates/base.html.twig | 8 ++++---- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/webapp/public/style_domjudge.css b/webapp/public/style_domjudge.css index 18eb31ef24..de8804dbc7 100644 --- a/webapp/public/style_domjudge.css +++ b/webapp/public/style_domjudge.css @@ -29,6 +29,24 @@ body.static { padding-top: 1rem; } +/* Some browsers have a rounding error in flex, so waste 1px to prevent scrollbars. */ +.fill-height { + box-sizing: border-box; + display: flex; + min-height: calc(100vh - 1px); +} + +.flex-pass { + display: flex; + flex-direction: column; + flex: 1; +} + +/* Override the bootstrap active tab to be flex instead of block by a more specific selector. */ +.fill-height .flex-pass.tab-pane.active { + display: flex; +} + /* menu */ #menuDefault ul li.nav-item { white-space: nowrap; diff --git a/webapp/templates/base.html.twig b/webapp/templates/base.html.twig index e953356b67..3bd84efe64 100644 --- a/webapp/templates/base.html.twig +++ b/webapp/templates/base.html.twig @@ -27,12 +27,12 @@ {% endfor %} - + {% block menu %}{% endblock %} {% block body %} -
-
-
+
+
+
{% block messages %} {% include 'partials/messages.html.twig' %} {% endblock %} From dd770d0e9125f52388e79b9d65d2b7cfcfee6df6 Mon Sep 17 00:00:00 2001 From: Kevin Jilissen Date: Sat, 22 Nov 2025 11:08:17 +0100 Subject: [PATCH 2/3] Stretch the code viewers using flex-pass This includes the source code and diff viewer for submissions and the executables editor for the system configuration. --- webapp/public/style_domjudge.css | 9 ++++++--- webapp/src/Controller/Jury/ExecutableController.php | 1 + webapp/src/Controller/Jury/SubmissionController.php | 2 ++ webapp/templates/jury/executable.html.twig | 4 ++-- webapp/templates/jury/partials/submission_diff.html.twig | 6 +++--- webapp/templates/jury/submission_edit_source.html.twig | 4 ++-- 6 files changed, 16 insertions(+), 10 deletions(-) diff --git a/webapp/public/style_domjudge.css b/webapp/public/style_domjudge.css index de8804dbc7..6d2e1e8921 100644 --- a/webapp/public/style_domjudge.css +++ b/webapp/public/style_domjudge.css @@ -36,7 +36,8 @@ body.static { min-height: calc(100vh - 1px); } -.flex-pass { +.flex-pass, +.flex-pass > form { display: flex; flex-direction: column; flex: 1; @@ -771,7 +772,9 @@ blockquote { } .editor { - width: 100%; - height: 80vh; border: 1px solid grey; + flex: 1; + height: 0; + min-height: 100px; /* Prefer a double scrollbar over not displaying code at all */ + width: 100%; } diff --git a/webapp/src/Controller/Jury/ExecutableController.php b/webapp/src/Controller/Jury/ExecutableController.php index 27a6c32ebc..8e1722c8e7 100644 --- a/webapp/src/Controller/Jury/ExecutableController.php +++ b/webapp/src/Controller/Jury/ExecutableController.php @@ -371,6 +371,7 @@ public function viewAction( 'default_compare' => (string)$this->config->get('default_compare'), 'default_run' => (string)$this->config->get('default_run'), 'default_full_debug' => (string)$this->config->get('default_full_debug'), + 'fill_height' => true, ])); } diff --git a/webapp/src/Controller/Jury/SubmissionController.php b/webapp/src/Controller/Jury/SubmissionController.php index 3097765723..18e1011fe1 100644 --- a/webapp/src/Controller/Jury/SubmissionController.php +++ b/webapp/src/Controller/Jury/SubmissionController.php @@ -950,6 +950,7 @@ public function sourceAction( 'originalSubmission' => $originalSubmission, 'allowEdit' => $this->allowEdit(), 'otherSubmissions' => $otherSubmissions, + 'fill_height' => true, ]); } @@ -1069,6 +1070,7 @@ public function editSourceAction(Request $request, Submission $submission, #[Map 'files' => $files, 'form' => $form, 'selected' => $rank, + 'fill_height' => true, ]; if ($request->isXmlHttpRequest()) { return $this->render('jury/submission_edit_source_modal.html.twig', $twigData); diff --git a/webapp/templates/jury/executable.html.twig b/webapp/templates/jury/executable.html.twig index 75e85d9a9e..718d818ffd 100644 --- a/webapp/templates/jury/executable.html.twig +++ b/webapp/templates/jury/executable.html.twig @@ -103,9 +103,9 @@ {%- endfor %} -
+
{%- for idx, filename in filenames %} -
+
{# Mark the first tab that is shown as active. #} {% set extra_css_classes = "active" %}
    @@ -52,10 +52,10 @@ }); {% set extra_css_classes = "show active" %} -
    +
    {%- for name, name_files in files %} {% set diff_id = "diff-" ~ name %} -
    +
    {{ showDiff(editor_id, diff_id, submission.submitid, name, name_files) }}
    {% set extra_css_classes = "" %} diff --git a/webapp/templates/jury/submission_edit_source.html.twig b/webapp/templates/jury/submission_edit_source.html.twig index c280b8ed15..a8615d121b 100644 --- a/webapp/templates/jury/submission_edit_source.html.twig +++ b/webapp/templates/jury/submission_edit_source.html.twig @@ -43,10 +43,10 @@ } } -
    +
    {%- for idx, file in files %} -
    {{ file.sourcecode | codeEditor(idx, submission.language.editorLanguage, true) }}
    From 1d3b15d9ea1b90478f32d44821604d209ceaa891 Mon Sep 17 00:00:00 2001 From: Kevin Jilissen Date: Sat, 22 Nov 2025 11:17:30 +0100 Subject: [PATCH 3/3] Force a recompute of the monaco editor height Monaco allocates height on initialization, and sets this as a fixed height. By removing the height on a resize of the body, we force monaco to recompute the value and claim all newly available space of the flexbox layout. Note that we use a resize observer instead of a `$(window).resize`, as this will also trigger for other DOM changes and not just viewport changes. --- webapp/public/js/domjudge.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/webapp/public/js/domjudge.js b/webapp/public/js/domjudge.js index 6ba5118d97..cb96b014b8 100644 --- a/webapp/public/js/domjudge.js +++ b/webapp/public/js/domjudge.js @@ -1554,3 +1554,15 @@ function initDiffEditorTab(editorId, diffId, submissionId, models) { } diffEditor.onDidUpdateDiff(updateIcon); } + +// Force a recompute of the monaco editor height when the display size changes. +if ('ResizeObserver' in window) { + $(() => { + var monacoObserver = new ResizeObserver(() => { + document.querySelectorAll('.monaco-editor').forEach(e => { + e.style.height = "0"; + }); + }); + monacoObserver.observe(document.body); + }); +}