`Development`: Fix shifted view when clicking on the form status buttons #12097

JTNing · 2026-02-04T16:41:22Z

Summary

This PR fixed shifted view when clicking on the form status buttons.

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.

Motivation and Context

Issue: #11210

When clicking on the form status bar (for any exercise), the scroll view gets shifted. When scrolling up the page header is not reachable again. Also, the bottom bar is disaligned, and you see content shining through the lower edge. This issue affects the user experience.

Create._.Test.Course.Junting.Ning.-.Google.Chrome.2026-02-05.16-51-50.mp4

Description

Adjusted the scroll logic in the scrollToHeadline function.

Steps for Testing

Prerequisites:

1 Instructor or editor

Log in to Artemis
Navigate to exercise management
Click the create exercise button to enter the exercise editing page.
Click the button on the status bar and observe the behavior, then scroll to the top and observe the behavior again.
Repeat these actions for each type of exercise to see whether the behavior is as expected.

Expected behavior:
Clicking on a breadcrumb should not shift the view

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

Performance Review

I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance even for very large courses with more than 2000 students.

Code Review

Code Review 1
Code Review 2

Manual Tests

Test 1
Test 2

Performance Tests

Test 1
Test 2

Test Coverage

Client

Class/File	Line Coverage	Lines	Expects	Ratio
form-status-bar.component.ts	91.30%	47	4	8.5

Last updated: 2026-02-09 15:32:08 UTC

Screenshots

Summary by CodeRabbit

Bug Fixes
- Improved "scroll to headline" to use the page's scroll container and reliably bring sections into view across layouts.
- Adjusted scrolling to account for fixed UI elements (navbar/status bar) so targets aren't obscured.
- Added fallback to scroll directly to a section when a container-based scroll isn't available.
Tests
- Updated tests to verify both container- and headline-based lookup and the new container-scrolling behavior.

github-actions · 2026-02-04T16:43:58Z

@JTNing Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

github-actions · 2026-02-04T18:00:20Z

End-to-End (E2E) Test Results Summary

Test Strategy: Two-phase execution

Phase 1 (Relevant): e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts
Phase 2 (Remaining): e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Status: E2E tests encountered an error

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

Test	Result	Time ⏱
No test annotations available

github-actions · 2026-02-04T19:25:49Z

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

github-actions · 2026-02-04T20:24:41Z

End-to-End (E2E) Test Results Summary

Test Strategy: Two-phase execution

Phase 1 (Relevant): e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts
Phase 2 (Remaining): e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Status:

	Tests	Passed ☑️	Skipped ⚠️	Failed ❌️	Time ⏱
End-to-End (E2E) Test Report	430 ran	426 passed	2 skipped	2 failed	2h 57m 57s 201ms

Test	Result	Time ⏱
End-to-End (E2E) Test Report
e2e/course/CourseMessages.spec.ts
ts.Course messages › Channel messages › Write/edit/delete message in channel › Student should be able to write message in channel	❌ failure	2m 23s 527ms
e2e/course/CourseMessages.spec.ts
ts.Course messages › Channel messages › Write/edit/delete message in channel › Student should be able to write message in channel	❌ failure	2m 23s 527ms

…icking-on-the-form-status-buttons

coderabbitai · 2026-02-05T22:09:48Z

Walkthrough

The scrollToHeadline method was refactored to scroll a dedicated container (course-body-container) to the headline position, computing offsets from navbar and status bar heights, guarding missing targets, and falling back to element.scrollIntoView() when the container is absent.

Changes

Cohort / File(s)	Summary
Scroll Container Logic `src/main/webapp/app/shared/form/form-status-bar/form-status-bar.component.ts`	Refactored `scrollToHeadline` to fetch both target and container via `document.getElementById`, compute a top offset using navbar and status bar heights, convert headline viewport coordinates to container content coordinates, and call `container.scrollTo({ top, behavior: 'smooth' })`. Added guards for missing headline and fallback to `target.scrollIntoView()` when container is absent.
Scroll Container Tests `src/main/webapp/app/shared/form/form-status-bar/form-status-bar.component.spec.ts`	Updated mocks to return separate container and target elements based on `getElementById` input, assert `getElementById` is called for both the headline title and `'course-body-container'`, verify `container.scrollTo` is invoked once, and include a fallback test verifying `target.scrollIntoView` when the container is missing.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant User
participant Component as FormStatusBarComponent
participant Document
participant Container as course-body-container
participant Target as HeadlineElement

User->>Component: trigger scrollToHeadline(title)
Component->>Document: getElementById(title)
Component->>Document: getElementById('course-body-container')
alt container found
    Component->>Container: compute offsets & content-top
    Component->>Container: scrollTo({ top, behavior: 'smooth' })
else container missing
    Component->>Target: scrollIntoView()
end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main fix: addressing a shifted view issue when clicking form status buttons, which directly matches the core changes to the scrollToHeadline function in the provided changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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/exercises/fix-shifted-view-when-clicking-on-the-form-status-buttons

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/main/webapp/app/shared/form/form-status-bar/form-status-bar.component.ts (1)

44-44: Consider using viewChild signal query instead of direct DOM lookup for jhi-navbar.

document.querySelector('jhi-navbar') couples this component to a specific global DOM structure. This is pragmatic for cross-component elements but somewhat fragile—if the navbar selector changes, this silently breaks with a 0 fallback. A brief comment documenting why direct DOM access is used here (cross-component element outside the template) would help future maintainers.
src/main/webapp/app/shared/form/form-status-bar/form-status-bar.component.spec.ts (2)
47-49: Tests verify call presence but not the computed scroll arguments.

The test asserts scrollTo was called once, but doesn't verify the positional argument. With the mock values (containerTop=0, headlineTop=300, scrollTop=100, navbarHeight=0, statusBarHeight=0), the expected call is scrollTo({ top: 400, behavior: 'smooth' }). Asserting the arguments would catch regressions in the offset math.

Similarly, the navbar (document.querySelector('jhi-navbar')) is not mocked, so the navbar-height branch is effectively untested.
Proposed argument verification
         expect(getElementSpy).toHaveBeenCalledWith(title);
         expect(getElementSpy).toHaveBeenCalledWith('course-body-container');
-        expect(containerElement.scrollTo).toHaveBeenCalledOnce();
+        expect(containerElement.scrollTo).toHaveBeenCalledWith({ top: 400, behavior: 'smooth' });
52-63: Fallback test should also verify scrollIntoView arguments.

The component passes { behavior: 'smooth', block: 'start', inline: 'nearest' } to scrollIntoView (line 40 in the component), but the test only checks that scrollIntoView was called, not with what options.
Proposed argument verification
-        expect(targetElement.scrollIntoView).toHaveBeenCalledOnce();
+        expect(targetElement.scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth', block: 'start', inline: 'nearest' });

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

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

github-actions · 2026-02-05T22:10:36Z

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

github-actions · 2026-02-05T22:25:28Z

Phase 1: E2E Tests ✅

Status: Phase 1 passed

Tests Run: e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts

Details: Check the Phase 1 Test Report for detailed results.

This is an automated comment for Phase 1 of the E2E test execution.

github-actions · 2026-02-05T23:17:25Z

Phase 2: E2E Tests ✅

Status: Phase 2 passed

Tests Run: e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Details: Check the Phase 2 Test Report for detailed results.

This is an automated comment for Phase 2 of the E2E test execution.

github-actions · 2026-02-05T23:17:41Z

End-to-End (E2E) Test Results Summary

Test Strategy: Two-phase execution

Phase 1 (Relevant): e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts
Phase 2 (Remaining): e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Status: All E2E tests passed (both phases)

Detailed Results: Check the individual phase reports in the workflow run for test counts, timing, and results.

…icking-on-the-form-status-buttons

github-actions · 2026-02-06T01:50:55Z

Phase 1: E2E Tests ✅

Status: Phase 1 passed

Tests Run: e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts

Details: Check the Phase 1 Test Report for detailed results.

This is an automated comment for Phase 1 of the E2E test execution.

github-actions · 2026-02-06T02:41:18Z

Phase 2: E2E Tests ✅

Status: Phase 2 passed

Tests Run: e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Details: Check the Phase 2 Test Report for detailed results.

This is an automated comment for Phase 2 of the E2E test execution.

github-actions · 2026-02-06T02:41:34Z

End-to-End (E2E) Test Results Summary

Test Strategy: Two-phase execution

Phase 1 (Relevant): e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts
Phase 2 (Remaining): e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Status: All E2E tests passed (both phases)

Detailed Results: Check the individual phase reports in the workflow run for test counts, timing, and results.

…icking-on-the-form-status-buttons

github-actions · 2026-02-06T10:23:11Z

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

…icking-on-the-form-status-buttons

github-actions · 2026-02-06T16:02:06Z

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

github-actions · 2026-02-06T16:17:32Z

Phase 1: E2E Tests ✅

Status: Phase 1 passed

Tests Run: e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts

Details: Check the Phase 1 Test Report for detailed results.

This is an automated comment for Phase 1 of the E2E test execution.

github-actions · 2026-02-06T16:59:29Z

Phase 2: E2E Tests ✅

Status: Phase 2 passed

Tests Run: e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Details: Check the Phase 2 Test Report for detailed results.

This is an automated comment for Phase 2 of the E2E test execution.

github-actions · 2026-02-06T16:59:49Z

End-to-End (E2E) Test Results Summary

Test Strategy: Two-phase execution

Phase 1 (Relevant): e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts
Phase 2 (Remaining): e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Status: All E2E tests passed (both phases)

Detailed Results: Check the individual phase reports in the workflow run for test counts, timing, and results.

jerrycai0006

Tested on TS3, works as described.

…icking-on-the-form-status-buttons

github-actions · 2026-02-08T19:14:43Z

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

github-actions · 2026-02-09T10:42:47Z

Phase 1: E2E Tests ✅

Status: Phase 1 passed

Tests Run: e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts

Details: Check the Phase 1 Test Report for detailed results.

This is an automated comment for Phase 1 of the E2E test execution.

SamuelRoettgermann

code review, some smal things

SamuelRoettgermann · 2026-02-09T10:36:51Z

src/main/webapp/app/shared/form/form-status-bar/form-status-bar.component.spec.ts

+
+        jest.spyOn(document, 'getElementById').mockImplementation((id: string) => {
+            if (id === title) return targetElement;
+            if (id === 'course-body-container') return null;


That if statement is just redundant

SamuelRoettgermann · 2026-02-09T10:37:04Z

src/main/webapp/app/shared/form/form-status-bar/form-status-bar.component.spec.ts

+
+        const getElementSpy = jest.spyOn(document, 'getElementById').mockImplementation((id: string) => {
+            if (id === 'course-body-container') return containerElement;
+            if (id === title) return targetElement;


That if statement is just redundant

SamuelRoettgermann · 2026-02-09T10:51:23Z

src/main/webapp/app/shared/form/form-status-bar/form-status-bar.component.ts

+        const offset = navbarHeight + statusBarHeight;
+
+        // Compute the target position within the container:
+        const containerRect = container.getBoundingClientRect();
+        const targetRect = target.getBoundingClientRect();
+
+        const currentScrollTop = container.scrollTop;
+        const targetTopWithinContainer = targetRect.top - containerRect.top + currentScrollTop;


Imo all of these variable names are not descriptive enough. What do target and container refer to, respectively? What does currentScrollTop or targetTopWithinContainer refer to? What does scrollTop even mean?
Even the names target and container, that I didn't even highlight here, are not descriptive at all.

It wasn't used before and you didn't add it, so I assume it must already exist? But what does it describe?

container refers to the element that actually handles scrolling on the page (#course-body-container).
target is the section headline element to scroll to.
scrollTop is a standard DOM property representing how many pixels the scroll container has been scrolled vertically.
The calculation here is converting from viewport coordinates to coordinates within the scroll container.

I'll rename the variables to make them more descriptive.

github-actions · 2026-02-09T11:36:08Z

Phase 2: E2E Tests ✅

Status: Phase 2 passed

Tests Run: e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Details: Check the Phase 2 Test Report for detailed results.

This is an automated comment for Phase 2 of the E2E test execution.

github-actions · 2026-02-09T11:36:26Z

End-to-End (E2E) Test Results Summary

Test Strategy: Two-phase execution

Phase 1 (Relevant): e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts
Phase 2 (Remaining): e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Status: All E2E tests passed (both phases)

Detailed Results: Check the individual phase reports in the workflow run for test counts, timing, and results.

…icking-on-the-form-status-buttons

…tor if statements to reduce redundancy

…form-status-buttons' of github.com:ls1intum/Artemis into bugfix/exercises/fix-shifted-view-when-clicking-on-the-form-status-buttons

github-actions · 2026-02-09T15:32:10Z

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

github-actions · 2026-02-09T15:47:07Z

Phase 1: E2E Tests ✅

Status: Phase 1 passed

Tests Run: e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts

Details: Check the Phase 1 Test Report for detailed results.

This is an automated comment for Phase 1 of the E2E test execution.

github-actions · 2026-02-09T16:40:09Z

Phase 2: E2E Tests ✅

Status: Phase 2 passed

Tests Run: e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Details: Check the Phase 2 Test Report for detailed results.

This is an automated comment for Phase 2 of the E2E test execution.

github-actions · 2026-02-09T16:40:30Z

End-to-End (E2E) Test Results Summary

Test Strategy: Two-phase execution

Phase 1 (Relevant): e2e/Login.spec.ts e2e/Logout.spec.ts e2e/SystemHealth.spec.ts
Phase 2 (Remaining): e2e/atlas/ e2e/course/ e2e/exam/ e2e/exercise/ e2e/lecture/

Status: All E2E tests passed (both phases)

Detailed Results: Check the individual phase reports in the workflow run for test counts, timing, and results.

JTNing added 2 commits February 4, 2026 17:28

Bugfix: Fix the view shifting issue

ce2cc57

General: Add comments

4c93017

github-project-automation bot added this to Artemis Development Feb 4, 2026

github-project-automation bot moved this to Work In Progress in Artemis Development Feb 4, 2026

github-actions bot assigned JTNing Feb 4, 2026

github-actions bot added the client Pull requests that update TypeScript code. (Added Automatically!) label Feb 4, 2026

JTNing changed the title ~~Exercises: Fix shifted view when clicking on the form status buttons~~ Development: Fix shifted view when clicking on the form status buttons Feb 4, 2026

JTNing added bugfix user interface exercise Pull requests that affect the corresponding module labels Feb 4, 2026

Development: Fix failed test case

344e986

github-actions bot removed the exercise Pull requests that affect the corresponding module label Feb 4, 2026

JTNing added the user-experience Pull request / issue that affects the UI/UX within Artemis label Feb 4, 2026

helios-aet bot temporarily deployed to artemis-test3.artemis.cit.tum.de February 5, 2026 14:16 Inactive

JTNing marked this pull request as ready for review February 5, 2026 22:07

JTNing requested a review from krusche as a code owner February 5, 2026 22:07

github-actions bot added the ready for review label Feb 5, 2026

Merge branch 'develop' into bugfix/exercises/fix-shifted-view-when-cl…

dd15d13

…icking-on-the-form-status-buttons

JTNing requested a review from maximiliansoelch February 5, 2026 22:09

coderabbitai bot previously approved these changes Feb 5, 2026

View reviewed changes

Merge branch 'develop' into bugfix/exercises/fix-shifted-view-when-cl…

35ff3c1

…icking-on-the-form-status-buttons

Merge branch 'develop' into bugfix/exercises/fix-shifted-view-when-cl…

c2dea97

…icking-on-the-form-status-buttons

Merge branch 'develop' into bugfix/exercises/fix-shifted-view-when-cl…

ab34536

…icking-on-the-form-status-buttons

helios-aet bot temporarily deployed to artemis-test3.artemis.cit.tum.de February 6, 2026 16:30 Inactive

jerrycai0006 previously approved these changes Feb 6, 2026

View reviewed changes

Merge branch 'develop' into bugfix/exercises/fix-shifted-view-when-cl…

2a81b2d

…icking-on-the-form-status-buttons

SamuelRoettgermann requested changes Feb 9, 2026

View reviewed changes

github-project-automation bot moved this from Work In Progress to Ready For Review in Artemis Development Feb 9, 2026

JTNing added 3 commits February 9, 2026 12:48

Merge branch 'develop' into bugfix/exercises/fix-shifted-view-when-cl…

7a6c0b1

…icking-on-the-form-status-buttons

Development: Rename variables to make them more descriptive and refac…

492ea31

…tor if statements to reduce redundancy

Merge branch 'bugfix/exercises/fix-shifted-view-when-clicking-on-the-…

1716f1d

…form-status-buttons' of github.com:ls1intum/Artemis into bugfix/exercises/fix-shifted-view-when-clicking-on-the-form-status-buttons

JTNing dismissed stale reviews from jerrycai0006 and coderabbitai[bot] via 1716f1d February 9, 2026 15:28

coderabbitai bot approved these changes Feb 9, 2026

View reviewed changes

JTNing requested a review from SamuelRoettgermann February 9, 2026 15:55

Development: Fix shifted view when clicking on the form status buttons #12097

Are you sure you want to change the base?

Development: Fix shifted view when clicking on the form status buttons #12097

Conversation

JTNing commented Feb 4, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

General

Client

Motivation and Context

Description

Steps for Testing

Testserver States

Review Progress

Performance Review

Code Review

Manual Tests

Performance Tests

Test Coverage

Client

Screenshots

Summary by CodeRabbit

Uh oh!

github-actions bot commented Feb 4, 2026

Uh oh!

github-actions bot commented Feb 4, 2026

End-to-End (E2E) Test Results Summary

Uh oh!

github-actions bot commented Feb 4, 2026

Uh oh!

github-actions bot commented Feb 4, 2026

End-to-End (E2E) Test Results Summary

Uh oh!

coderabbitai bot commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Uh oh!

github-actions bot commented Feb 5, 2026

Uh oh!

github-actions bot commented Feb 5, 2026

Phase 1: E2E Tests ✅

Uh oh!

github-actions bot commented Feb 5, 2026

Phase 2: E2E Tests ✅

Uh oh!

github-actions bot commented Feb 5, 2026

End-to-End (E2E) Test Results Summary

Uh oh!

github-actions bot commented Feb 6, 2026

Phase 1: E2E Tests ✅

Uh oh!

github-actions bot commented Feb 6, 2026

Phase 2: E2E Tests ✅

Uh oh!

github-actions bot commented Feb 6, 2026

End-to-End (E2E) Test Results Summary

Uh oh!

github-actions bot commented Feb 6, 2026

Uh oh!

github-actions bot commented Feb 6, 2026

Uh oh!

github-actions bot commented Feb 6, 2026

Phase 1: E2E Tests ✅

Uh oh!

github-actions bot commented Feb 6, 2026

Phase 2: E2E Tests ✅

Uh oh!

github-actions bot commented Feb 6, 2026

End-to-End (E2E) Test Results Summary

Uh oh!

jerrycai0006 left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 8, 2026

Uh oh!

github-actions bot commented Feb 9, 2026

`Development`: Fix shifted view when clicking on the form status buttons #12097

`Development`: Fix shifted view when clicking on the form status buttons #12097

JTNing commented Feb 4, 2026 •

edited by github-actions bot

Loading

coderabbitai bot commented Feb 5, 2026 •

edited

Loading