Programming exercises: Fix table overflow in rendered markdown (#9957)

ls1intum · Dec 10, 2024 · f01b5eb · f01b5eb
1 parent d312eae
commit f01b5eb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/...ises/programming/shared/instructions-render/programming-exercise-instruction.component.ts b/...ises/programming/shared/instructions-render/programming-exercise-instruction.component.ts
@@ -304,7 +304,8 @@ export class ProgrammingExerciseInstructionComponent implements OnChanges, OnDes
             const updatedMarkdown = htmlForMarkdown(this.examExerciseUpdateHighlighterComponent.updatedProblemStatement, this.markdownExtensions);
             const diffedMarkdown = diff(outdatedMarkdown, updatedMarkdown);
             const markdownWithoutTasks = this.prepareTasks(diffedMarkdown);
-            this.renderedMarkdown = this.sanitizer.bypassSecurityTrustHtml(markdownWithoutTasks);
+            const markdownWithTableStyles = this.addStylesForTables(markdownWithoutTasks);
+            this.renderedMarkdown = this.sanitizer.bypassSecurityTrustHtml(markdownWithTableStyles ?? markdownWithoutTasks);
             // Differences between UMLs are ignored, and we only inject the current one
             setTimeout(() => {
                 const injectUML = this.injectableContentForMarkdownCallbacks[this.injectableContentForMarkdownCallbacks.length - 1];
@@ -317,7 +318,8 @@ export class ProgrammingExerciseInstructionComponent implements OnChanges, OnDes
             this.injectableContentForMarkdownCallbacks = [];
             const renderedProblemStatement = htmlForMarkdown(this.exercise.problemStatement, this.markdownExtensions);
             const markdownWithoutTasks = this.prepareTasks(renderedProblemStatement);
-            this.renderedMarkdown = this.sanitizer.bypassSecurityTrustHtml(markdownWithoutTasks);
+            const markdownWithTableStyles = this.addStylesForTables(markdownWithoutTasks);
+            this.renderedMarkdown = this.sanitizer.bypassSecurityTrustHtml(markdownWithTableStyles ?? markdownWithoutTasks);
             setTimeout(() => {
                 this.injectableContentForMarkdownCallbacks.forEach((callback) => {
                     callback();
@@ -327,6 +329,23 @@ export class ProgrammingExerciseInstructionComponent implements OnChanges, OnDes
         }
     }
 
+    addStylesForTables(markdownWithoutTasks: string): string | undefined {
+        if (!markdownWithoutTasks?.includes('<table')) {
+            return;
+        } else {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(markdownWithoutTasks as string, 'text/html');
+            const tables = doc.querySelectorAll('table');
+
+            tables.forEach((table) => {
+                table.style.maxWidth = '100%';
+                table.style.overflowX = 'scroll';
+                table.style.display = 'block';
+            });
+            return doc.body.innerHTML;
+        }
+    }
+
     prepareTasks(problemStatementHtml: string) {
         const tasks = Array.from(problemStatementHtml.matchAll(taskRegex));
         if (!tasks) {

diff --git a/src/main/webapp/app/overview/course-exercises/course-exercises.component.html b/src/main/webapp/app/overview/course-exercises/course-exercises.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex justify-content-between horizontal-scroll">
+<div class="d-flex horizontal-scroll">
     @if (course) {
         @if (!isShownViaLti) {
             <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }">
@@ -14,7 +14,11 @@
         }
 
         @if (exerciseSelected) {
-            <div class="vw-100 module-bg rounded-3" [ngStyle]="isShownViaLti ? { height: '90vh', position: 'relative' } : {}">
+            <div
+                [ngClass]="{ 'exercise-content-sidebar-width': !isCollapsed }"
+                class="exercise-content-width module-bg rounded-3"
+                [ngStyle]="isShownViaLti ? { height: '90vh', position: 'relative' } : {}"
+            >
                 <router-outlet (deactivate)="onSubRouteDeactivate()" />
             </div>
         } @else {

diff --git a/src/main/webapp/app/overview/course-overview.scss b/src/main/webapp/app/overview/course-overview.scss
@@ -189,3 +189,13 @@ canvas#complete-chart {
         opacity: 1;
     }
 }
+
+.exercise-content-sidebar-width {
+    // magic number is 255px sidebar width + 8px margin
+    width: calc(100% - 263px) !important;
+    transition: width 0.1s 0s ease-in-out;
+}
+.exercise-content-width {
+    width: 100%;
+    transition: width 0.1s 0s ease-in-out;
+}