Plagiarism checks: Fix scrolling issue on side-by-side viewer for mod…

…eling (#9748)
ls1intum · Nov 16, 2024 · f05b0a5 · f05b0a5
1 parent 7bf4a93
commit f05b0a5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/src/main/webapp/app/exercises/modeling/shared/modeling-editor.component.html b/src/main/webapp/app/exercises/modeling/shared/modeling-editor.component.html
@@ -108,7 +108,11 @@ <h4 class="modal-title" jhiTranslate="artemisApp.modelingEditor.helpModal.title"
         }
     </div>
     @if (readOnly) {
-        <div class="d-flex align-items-center justify-content-center readonly-diagram" [innerHtml]="readOnlySVG" [style.margin-top]="isFullScreen ? '30px' : ''"></div>
+        <div
+            class="d-flex align-items-center justify-content-center readonly-diagram scroll-container"
+            [innerHtml]="readOnlySVG"
+            [ngClass]="{ 'full-screen-margin': isFullScreen }"
+        ></div>
     }
 
     @if (withExplanation) {

diff --git a/src/main/webapp/app/exercises/modeling/shared/modeling-editor.component.scss b/src/main/webapp/app/exercises/modeling/shared/modeling-editor.component.scss
@@ -49,7 +49,24 @@ $draggable-width: 15px;
 
 .readonly-diagram {
     height: 100%;
-    overflow: hidden;
+    overflow-x: auto;
+    overflow-y: auto;
+}
+
+.scroll-container {
+    scrollbar-width: thin; /* Firefox */
+    &::-webkit-scrollbar {
+        width: 6px; /* WebKit */
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0.2);
+        border-radius: 3px;
+    }
+}
+
+.full-screen-margin {
+    margin-top: 30px;
 }
 
 @keyframes spin {

diff --git a/src/test/playwright/support/pageobjects/exam/ExamExerciseGroupsPage.ts b/src/test/playwright/support/pageobjects/exam/ExamExerciseGroupsPage.ts
@@ -22,8 +22,9 @@ export class ExamExerciseGroupsPage {
     async clickEditGroup(groupID: number) {
         await this.page.click(`#group-${groupID} .edit-group`);
     }
+
     async clickEditGroupForTestExam() {
-        await this.page.getByText('Edit').click();
+        await this.page.getByRole('link', { name: 'Edit' }).click();
     }
 
     async clickDeleteGroup(groupID: number, groupName: string) {