Skip to content

Dynamically stretch the code editor height using flexboxes #3206

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+50 −14
Open

Dynamically stretch the code editor height using flexboxes #3206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fdfac15
Add option to stretch the body to the full height
Kevinjil Nov 22, 2025
45b0817
Stretch the code viewers using flex-pass
Kevinjil Nov 22, 2025
b867ad1
Force a recompute of the monaco editor height
Kevinjil Nov 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions webapp/public/js/domjudge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1290,3 +1290,15 @@ function initScoreboardSubmissions() {
});
});
}

// 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);
});
}
25 changes: 23 additions & 2 deletions webapp/public/style_domjudge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,25 @@ 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,
.flex-pass > form {
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;
Expand Down Expand Up @@ -753,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%;
}
1 change: 1 addition & 0 deletions webapp/src/Controller/Jury/ExecutableController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
]));
}

Expand Down
2 changes: 2 additions & 0 deletions webapp/src/Controller/Jury/SubmissionController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -924,6 +924,7 @@ public function sourceAction(
'originalFiles' => $originalFiles,
'originalFileStats' => $originalFileStats,
'allowEdit' => $this->allowEdit(),
'fill_height' => true,
]);
}

Expand Down Expand Up @@ -1043,6 +1044,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);
Expand Down
8 changes: 4 additions & 4 deletions webapp/templates/base.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@
<link rel="stylesheet" href="{{ asset('css/custom/' ~ file) }}">
{% endfor %}
</head>
<body{% if static is defined and static %} class="static"{% endif %}>
<body class="{% if fill_height is defined and fill_height %} fill-height{% endif %}{% if static is defined and static %} static{% endif %}">
{% block menu %}{% endblock %}
{% block body %}
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="container-fluid{% if fill_height is defined and fill_height %} flex-pass{% endif %}">
<div class="row{% if fill_height is defined and fill_height %} flex-pass{% endif %}">
<div class="col-12{% if fill_height is defined and fill_height %} flex-pass{% endif %}">
{% block messages %}
{% include 'partials/messages.html.twig' %}
{% endblock %}
Expand Down
4 changes: 2 additions & 2 deletions webapp/templates/jury/executable.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,9 @@
</li>
{%- endfor %}
</ul>
<div class="tab-content source-tab">
<div class="tab-content source-tab flex-pass">
{%- for idx, filename in filenames %}
<div class="tab-pane fade {% if (selected is null and loop.first) or selected == idx %}show active{% endif %}" id="source-{{ idx }}"
<div class="tab-pane flex-pass fade {% if (selected is null and loop.first) or selected == idx %}show active{% endif %}" id="source-{{ idx }}"
role="tabpanel">
<div class="mb-1">
<a class="btn btn-secondary btn-sm"
Expand Down
4 changes: 2 additions & 2 deletions webapp/templates/jury/partials/submission_diff.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@
</ul>
{# Mark the first pane that is shown as active. #}
{% set extra_css_classes = "show active" %}
<div class="tab-content source-tab">
<div class="tab-content source-tab flex-pass">
{%- for filePair in oldFileStats.changedfiles %}
<div class="tab-pane fade {{ extra_css_classes }}" id="diff-{{ filePair.1.submitfileid }}" role="tabpanel">
<div class="tab-pane flex-pass fade {{ extra_css_classes }}" id="diff-{{ filePair.1.submitfileid }}" role="tabpanel">
{% set diff_id = "diff" ~ filePair.1.submitfileid %}
<div class="mb-1">
<a class="btn btn-secondary btn-sm"
Expand Down
4 changes: 2 additions & 2 deletions webapp/templates/jury/submission_edit_source.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@
}
}
</script>
<div class="tab-content source-tab">
<div class="tab-content source-tab flex-pass">
{%- for idx, file in files %}

<div class="tab-pane fade {% if (selected is null and loop.first) or selected == file.rank %}show active{% endif %}"
<div class="tab-pane flex-pass fade {% if (selected is null and loop.first) or selected == file.rank %}show active{% endif %}"
id="source-{{ file.rank }}" data-rank="{{ file.rank }}" role="tabpanel">
{{ file.sourcecode | codeEditor(idx, submission.language.editorLanguage, true) }}
</div>
Expand Down
4 changes: 2 additions & 2 deletions webapp/templates/jury/submission_source.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,9 @@
{%- endfor %}

</ul>
<div class="tab-content source-tab">
<div class="tab-content source-tab flex-pass">
{%- for file in files %}
<div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="source-{{ file.rank }}"
<div class="tab-pane flex-pass fade {% if loop.first %}show active{% endif %}" id="source-{{ file.rank }}"
role="tabpanel">
<div class="mb-1">
<a class="btn btn-secondary btn-sm"
Expand Down
Loading