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.

Author: Kevinjil

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%;
 }

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,
         ]));
     }
 

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);

webapp/templates/jury/executable.html.twig

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

webapp/templates/jury/partials/submission_diff.html.twig

@@ -1,4 +1,4 @@
-<div id="{{ editor_id }}-wrapper">
+<div id="{{ editor_id }}-wrapper" class="flex-pass">
     {# Mark the first tab that is shown as active. #}
     {% set extra_css_classes = "active" %}
     <ul class="nav nav-tabs source-tab-nav align-items-end">
@@ -52,10 +52,10 @@
     });
     </script>
     {% set extra_css_classes = "show active" %}
-    <div class="tab-content source-tab">
+    <div class="tab-content source-tab flex-pass">
         {%- for name, name_files in files %}
             {% set diff_id = "diff-" ~ name %}
-            <div class="tab-pane fade {{ extra_css_classes }}" id="{{ diff_id }}-tab" role="tabpanel">
+            <div class="tab-pane fade flex-pass {{ extra_css_classes }}" id="{{ diff_id }}-tab" role="tabpanel">
                 {{ showDiff(editor_id, diff_id, submission.submitid, name, name_files) }}
             </div>
             {% set extra_css_classes = "" %}

webapp/templates/jury/submission_edit_source.html.twig

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