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

@@ -924,6 +924,7 @@ public function sourceAction(
             'originalFiles' => $originalFiles,
             'originalFileStats' => $originalFileStats,
             'allowEdit' => $this->allowEdit(),
+            'fill_height' => true,
         ]);
     }
 
@@ -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);

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

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

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>

webapp/templates/jury/submission_source.html.twig

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