diff --git a/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts b/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts index d53b738b3ff1..b978289acf7d 100644 --- a/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts +++ b/src/main/webapp/app/exercises/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.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 index bd8e5fceab3b..e4ab1bac6939 100644 --- 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 @@ -
+
@if (course) { @if (!isShownViaLti) {
@@ -14,7 +14,11 @@ } @if (exerciseSelected) { -
+
} @else { diff --git a/src/main/webapp/app/overview/course-overview.scss b/src/main/webapp/app/overview/course-overview.scss index 718a755e7b56..1720561a290f 100644 --- 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; +}