Integrated markdown editor: Fix upload footer layout overflow

[HawKhiem]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• This is a small issue that I tested locally and was confirmed by another developer on a test server.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
• I strictly followed the principle of data economy for all client-server REST calls.
• I strictly followed the client coding guidelines.
• I strictly followed the AET UI-UX guidelines.
• Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.

Changes affecting Programming Exercises

• High priority: I tested all changes and their related features with all corresponding user types on a test server configured with the integrated lifecycle setup (LocalVC and LocalCI).
• I tested all changes and their related features with all corresponding user types on a test server configured with LocalVC and Jenkins.

Motivation and Context

The "Info Text" at the top of the markdown editor was adding extra height that wasn't being accounted for when the editor was in externalHeight mode (e.g., in the Instructor Code Editor). This caused the editor wrapper to inherit the full height of the container plus the info text, pushing the file upload footer out of the visible viewport.

Description

This PR fixes the layout overflow issue by converting the markdown editor container to a Flexbox column.

• HTML: The outer container now uses d-flex flex-column. The Info Text is set to flex-shrink-0, and the wrapper is set to flex-grow-1. This ensures the wrapper automatically fills only the remaining space.
• TypeScript: Updated getEditorHeight() to measure this.wrapper instead of this.fullElement. Since the wrapper is now correctly sized by Flexbox, this measurement inherently mimics the "available space" correctly, ensuring the internal Monaco instance sizes itself well within the boundaries.

Steps for Testing

Prerequisites:

• 1 Instructor
• 1 Section with Markdown Editor enabled (e.g., Problem Statement in Code Editor)

1. Log in to Artemis as an Instructor.
2. Navigate to a Programming Exercise.
3. Open the Editor (Edit in Editor).
4. Observe the "Problem Statement" editor on the left (or right, depending on layout).
5. Verify that the "Info Text" (blue help text) is visible at the top.
6. Verify that the "Upload files" footer is fully visible at the bottom of the editor area and not pushed off-screen.
7. Attempt to resize the browser or the split pane to ensure the footer stays visible.

Testserver States

You can manage test servers using Helios. Check environment statuses in the environment list. To deploy to a test server, go to the CI/CD page, find your PR or branch, and trigger the deployment.

Review Progress

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Client

Class/File	Line Coverage	Lines	Expects	Ratio
markdown-editor-monaco.component.ts	97.50%	523	46	8.8

Last updated: 2026-01-27 20:54:29 UTC

Screenshots

Summary by CodeRabbit

• Bug Fixes
  • Improved markdown editor layout by switching to a vertical flex arrangement for stable header, content, and footer alignment.
  • Adjusted height handling so the editor wrapper reliably fills available space and falls back to auto when appropriate.
  • Prevented negative editor heights by clamping calculated values to a non-negative minimum.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[github-actions]

@HawKhiem Test coverage has been automatically updated in the PR description.

[github-actions]

@HawKhiem Test coverage has been automatically updated in the PR description.

[coderabbitai]

Walkthrough

Refactors the markdown editor to use a vertical flex layout and unifies editor height calculation to derive from the wrapper element, with clamped non-negative heights and string-based height binding (px or auto).

Changes

Cohort / File(s)	Summary
Monaco Markdown Editor Template src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.html	Converted root to d-flex flex-column; made info text flex-shrink-0; made wrapper flex-grow-1; changed height binding to return 'NNNpx' or 'auto' instead of numeric px binding.
Monaco Markdown Editor Height Logic src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts	getEditorHeight() now always uses wrapper clientHeight and clamps result with Math.max(0, ...), removing the previous conditional between fullElement and wrapper.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing layout overflow in the markdown editor's upload footer by restructuring the component to use Flexbox.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch bugfix/integrated-markdown-editor/fix-footer-layout

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@src/main/webapp/app/shared/markdown-editor/monaco/markdown-editor-monaco.component.ts`:
- Around line 517-522: getEditorHeight currently subtracts footer and palette
heights (using this.getElementClientHeight on this.wrapper,
this.fileUploadFooter, this.actionPalette) and then subtracts
BORDER_HEIGHT_OFFSET which can produce negative values in small containers;
update getEditorHeight to clamp the computed height to a minimum of 0 (e.g. use
Math.max(0, computedHeight)) before returning so Monaco never receives a
negative size.

[github-actions]

@HawKhiem Test coverage has been automatically updated in the PR description.

[github-actions]

End-to-End (E2E) Test Results Summary

	Tests	Passed ✅	Skipped	Failed	Time ⏱
End-to-End (E2E) Test Report	1 ran	1 passed	0 skipped	0 failed	1s 898ms

Test	Result	Time ⏱
No test annotations available

[github-actions]

End-to-End (E2E) Test Results Summary

	Tests	Passed ☑️	Skipped ⚠️	Failed ❌️	Time ⏱
End-to-End (E2E) Test Report	223 ran	221 passed	1 skipped	1 failed	1h 43m 40s 48ms

Test	Result	Time ⏱
End-to-End (E2E) Test Report
e2e/exam/test-exam/TestExamStudentExams.spec.ts
ts.Test Exam - student exams › Check exam participants and their submissions › Search for a student in exams	❌ failure	7m 8s 851ms

[florian-glombik]

Code

[github-actions]

@HawKhiem Test coverage has been automatically updated in the PR description.

[github-actions]

End-to-End (E2E) Test Results Summary

	Tests	Passed ☑️	Skipped ⚠️	Failed ❌️	Time ⏱
End-to-End (E2E) Test Report	223 ran	220 passed	1 skipped	2 failed	1h 45m 4s 403ms

Test	Result	Time ⏱
End-to-End (E2E) Test Report
e2e/exam/test-exam/TestExamParticipation.spec.ts
ts.Test exam participation › Early Hand-in › Using exercise sidebar to navigate within exam	❌ failure	4m 20s 721ms
ts.Test exam participation › Early Hand-in › Using exercise overview to navigate within exam	❌ failure	4m 53s 262ms

[sawys777]

Reviewed code and tested on TS4

[anian03]

Tested on TS6. The file upload footer was visible again in the exercise problem statement editor, and I could also not see any sizing issues anywhere else, e.g. communication or exam texts. When resizing, the text adapted to the available space and did not cause overflow issues.

[atharvamp]

Tested on TS6, everything works as intended. After resizing, the text is still visible. Tested on Safari and Chrome.

[github-actions]

@HawKhiem The "ready to merge" label was removed because the PR is not yet ready:

Unchecked Tasks (1)

• Test 1

---

To resolve:

• Check all task checkboxes in the PR description (both Checklist and Review Progress sections)

Once resolved, you can re-add the "ready to merge" label.

[github-actions]

@HawKhiem Your PR description needs attention before it can be reviewed:

Issues Found

1. Screenshots are missing but this PR contains visual/UI changes

How to Fix

• Include screenshots of the UI changes.

---

This check validates that your PR description follows the PR template. A complete description helps reviewers understand your changes and speeds up the review process.

Note: This description validation is an experimental feature. If you observe false positives, please send a DM with a link to the wrong comment to Patrick Bassner on Slack. Thank you!

[maxgutke]

I tested this PR on TS1. Everything works as expected

[github-actions]

@HawKhiem Test coverage has been automatically updated in the PR description.

[github-actions]

End-to-End (E2E) Test Results Summary

	Tests	Passed ✅	Skipped ⚠️	Failed	Time ⏱
End-to-End (E2E) Test Report	223 ran	222 passed	1 skipped	0 failed	1h 30m 37s 340ms

Test	Result	Time ⏱
No test annotations available

[lana-ati]

Tested during working session on TS1. Worked as expected.