Fix layout overlapping in modeling-assessment component

- Added a parent container to manage the layout flow of modeling-assessment and additional-feedback sections.
- Ensured proper stacking of sections using flexbox and dynamic height adjustments.
- Restricted modeling-assessment height to prevent overlap in landscape mode.
- Enabled smooth scrolling within modeling-assessment to improve usability.
- Added responsive handling for landscape orientation to ensure consistent layout behavior.

src/main/webapp/app/exercises/modeling/assess/modeling-assessment.component.html

@@ -1,29 +1,36 @@
-<div #resizeContainer class="modeling-assessment" [class.resizable]="resizeOptions">
-    @if (title || displayPoints) {
-        <div class="card-header bg-primary text-white">
-            @if (title) {
-                <span>{{ title }}</span>
-            }
-            <span class="flex-fill"></span>
-            @if (displayPoints) {
-                <jhi-score-display [score]="totalScore" [maxPoints]="maxScore" [maxBonusPoints]="maxBonusPoints" [course]="course" />
+<div class="parent-container">
+    <div #resizeContainer class="modeling-assessment" [class.resizable]="resizeOptions">
+        @if (title || displayPoints) {
+            <div class="card-header bg-primary text-white">
+                @if (title) {
+                    <span>{{ title }}</span>
+                }
+                <span class="flex-fill"></span>
+                @if (displayPoints) {
+                    <jhi-score-display [score]="totalScore" [maxPoints]="maxScore" [maxBonusPoints]="maxBonusPoints" [course]="course" />
+                }
+            </div>
+        }
+        <div class="apollon-row" id="apollon-assessment-row">
+            <div #editorContainer class="apollon-container"></div>
+            @if (resizeOptions && resizeOptions.horizontalResize) {
+                <div class="draggable-right">
+                    <fa-icon [icon]="faGripLinesVertical" />
+                </div>
             }
         </div>
-    }
-    <div class="apollon-row" id="apollon-assessment-row">
-        <div #editorContainer class="apollon-container"></div>
-        @if (resizeOptions && resizeOptions.horizontalResize) {
-            <div class="draggable-right">
-                <fa-icon [icon]="faGripLinesVertical" />
+        @if (resizeOptions && resizeOptions.verticalResize) {
+            <div class="draggable-bottom">
+                <fa-icon [icon]="faGripLines" />
             </div>
         }
+        @if (explanation) {
+            <jhi-modeling-explanation-editor [explanation]="explanation" [readOnly]="true" />
+        }
+    </div>
+
+    <!-- Additional feedback section starts here -->
+    <div id="additional-feedback">
+        <!-- Feedback block -->
     </div>
-    @if (resizeOptions && resizeOptions.verticalResize) {
-        <div class="draggable-bottom">
-            <fa-icon [icon]="faGripLines" />
-        </div>
-    }
-    @if (explanation) {
-        <jhi-modeling-explanation-editor [explanation]="explanation" [readOnly]="true" />
-    }
 </div>

src/main/webapp/app/exercises/modeling/assess/modeling-assessment.component.scss

@@ -1,19 +1,20 @@
 $draggable-width: 15px;
 
-.modeling-assessment {
-    position: relative;
+.parent-container {
     display: flex;
-    flex-flow: column nowrap;
-    height: 100%;
+    flex-direction: column; /* Stack sections vertically */
+    gap: 1rem; /* Add spacing between sections */
+    position: relative; /* Prevent floating issues */
+    overflow: hidden; /* Ensure content stays contained */
+}
 
-    .card-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        font-size: 1rem;
-        font-weight: 500;
-    }
+.modeling-assessment {
+    position: relative; /* Keep in layout flow */
+    height: auto; /* Adjust height dynamically */
+    max-height: 80vh; /* Restrict height to prevent overlaps */
+    overflow-y: auto; /* Enable scrolling */
+    margin-bottom: 2rem; /* Add space below */
+    scroll-behavior: smooth; /* Smooth scrolling experience */
 }
 
 .resizable {
@@ -29,19 +30,24 @@ $draggable-width: 15px;
 }
 
 .apollon-container {
-    height: 100%;
+    height: auto; /* Adjust dynamically */
     width: 100%;
 }
 
 .apollon-row {
     display: flex;
-    height: 100%;
+    height: auto; /* Adjust dynamically */
+}
+
+@media screen and (orientation: landscape) {
+    .modeling-assessment {
+        max-height: 70vh; /* Restrict height in landscape */
+        overflow-y: scroll; /* Ensure scrolling works */
+    }
 }
 
-/* Target the modeling-assessment class for print media */
 @media print {
     .modeling-assessment {
-        /* Adjust the size of the container to fit the print area */
         height: auto !important;
         max-height: 100vh !important;
     }