Styling updates

Author: XanderVertegaal

frontend/src/app/annotate/annotation-input/annotation-input.component.html

@@ -11,9 +11,9 @@ <h2 i18n>Parser input</h2>
         @if (problemDetails(); as details) {
         <la-problem-details [problemDetails]="details" />
         }
-        <div class="d-flex flex-row gap-5">
-            <la-premises-form class="w-50" [form]="inputForm" />
-            <la-knowledge-base-form class="w-50" [form]="inputForm" />
+        <div class="input-form-container">
+            <la-premises-form class="subform" [form]="inputForm" />
+            <la-knowledge-base-form class="subform" [form]="inputForm" />
         </div>
     </div>
     <div class="mb-3 d-flex justify-content-center">

frontend/src/app/annotate/annotation-input/annotation-input.component.scss

@@ -0,0 +1,21 @@
+.input-form-container {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    margin-top: 20px;
+
+    .subform {
+        width: 50%;
+    }
+}
+
+@media screen and (max-width: 1200px) {
+    .input-form-container {
+        flex-direction: column;
+        align-items: stretch;
+
+        .subform {
+            width: 100%;
+        }
+    }
+}

frontend/src/app/annotate/annotation-input/problem-details/problem-details.component.html

@@ -16,10 +16,12 @@
                 <td class="text-muted" i18n>Dataset:</td>
                 <td>{{ problemDetails().dataset }}</td>
             </tr>
-            <tr>
-                <td class="text-muted" i18n>Section:</td>
-                <td>{{ sectionString() }}</td>
-            </tr>
+            @if (sectionString()) {
+                <tr>
+                    <td class="text-muted" i18n>Section:</td>
+                    <td>{{ sectionString() }}</td>
+                </tr>
+            }
             @if (problemDetails().comment) {
             <tr>
                 <td class="text-muted">