[Bugfix:TAGrading] Fix Notebook scroll by itsjanajana · Pull Request #12603 · Submitty/Submitty

itsjanajana · 2026-03-18T20:34:17Z

Why is this Change Important & Necessary?

Fixes #11096 : Graders cannot scroll to see the full answer in a codebox if the content overflows.
Grading becomes difficult if TA/Instructor can not scroll to view the whole answer. Fix enables to view entire answer, expand and scroll with a horizontal and vertical scrollbar in the codebox. Editing still remains disabled. Text selection, horizontal/vertical scrolling, and box expansion are allowed.

What is the New Behavior?

Before

Textboxes and codeboxes could not scroll or expand properly.
Horizontal and vertical scrollbars existed but were not accessible due to pointer-events:none.

Above photo shows how the three textboxes do not expand. There is a little double slash expansion symbol in bottom right corner in all of the textboxes, but cursor can not access it.

Same with codeboxes. The horizontal and vertical scrollbar in each of the codeboxes can not be accessed by cursor.

After

Scrollbars in codeboxes are now fully functional.
Textboxes (short answer) can be expanded horizontally; text can be scrolled and selected.
Editing remains prevented in grader view.

Above two photos shows how the textbox can be expanded horizontally. There is no scrollbar, but upon pressing the right key on keyboard, the text does move and can be viewed easily. Editing of the textboxes is still not allowed, even though pointer-events condition removed.

The codeboxes already came with vertical & horizontal scrollbars, but were initially not working due to the cursor pointer settings, those are working now. The boxes can be expanded, and scrolled horizontally and vertically enabling easier grading.

What steps should a reviewer take to reproduce or test the bug or new feature?

Open Grading for an assignment with a long answer question. I used Notebook Basic Grading.
Select a submission with a long answer that overflows, I used student(Joe) submission.
Try and scroll to see the full content. Before the PR, it does not allow scroll or expansion. It only lets you select texts but that also, you can't really see what youre selecting. After the PR, the scrolling, expansion, and text selection work properly..

Automated Testing & Documentation

This fix is a minor UI interaction change.
I have manually tested in local Vagrant environment.
No automated tests added
No additional documentation, it is a minor UI fix.

Other information

Is this a breaking change? No
Does this PR include migrations to update existing installations? No
Are there security concerns with this PR? No

Code Changes

Photo of the changes i have made in code.

Removed "pointer-events:none" as it did not let any mouse interaction with the text/code boxes.
Added "readOnly: true" to ensure that even if codebox is uneditable, scrolling/expansion/selection are allowed.

…-events with readOnly

Benny-Dav

Great fix.
I tested a similar fix and found a potential simplification. Kindly find comment inline.

Benny-Dav · 2026-03-21T12:24:20Z

                        $('#codebox_{{ num_codeboxes }}').addClass("small-mirror");
                    }

+		    {% if viewing_inactive_version or is_grader_view %}


I think this "is_grader_view" condition on this line might be redundant, because lines 382 - 401 also set readOnly to true for is_grader_view condition for the CodeMirror element.
I have tested without the condition here and the fix behaviour still works.
Do you think we could simplify this?

codecov · 2026-03-24T00:13:32Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 21.64%. Comparing base (f532a4f) to head (a94f980).
⚠️ Report is 17 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##               main   #12603   +/-   ##
=========================================
  Coverage     21.64%   21.64%           
  Complexity     9654     9654           
=========================================
  Files           268      268           
  Lines         36244    36244           
  Branches        487      487           
=========================================
  Hits           7845     7845           
  Misses        27916    27916           
  Partials        483      483

Flag	Coverage Δ
autograder	`21.32% <ø> (ø)`
js	`2.04% <ø> (ø)`
migrator	`100.00% <ø> (ø)`
php	`20.66% <ø> (ø)`
python_submitty_utils	`80.08% <ø> (ø)`
submitty_daemon_jobs	`91.13% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

dagemcn

Good work on this issue. I agree with @Benny-Dav, your change on line 133 is redundant. However, I notice that with the fix you can only expand the boxes vertically. Since this is a fairly small issue I think it would be suitable to implement a fix for this within this PR as opposed to creating an entirely new issue. Remove the changes on lines 133-136 and fix the double slash expansion bug and I'll approve.

itsjanajana · 2026-03-28T11:07:08Z

Thanks for the feedback! I have updated now

Removed the redundant "is_grader_view, readOnly" condition.
Updated the resize behavior to allow both horizontal and vertical scrolling
All existing scrolling and selection features still work.

dagemcn

Resizing now works as intended. I notice that if the text does not fix in the text box horizontally, there is no horizontal scroll bar making it difficult for graders to view text that goes past the maximum horizontal expansion size. However, I think this is an issue for another PR. Good changes here.

Fix notebook codebox scroll issue in grader view by replacing pointer…

ff071a1

…-events with readOnly

github-project-automation Bot added this to Submitty Development Mar 18, 2026

github-project-automation Bot moved this to Seeking Reviewer in Submitty Development Mar 18, 2026

Benny-Dav reviewed Mar 21, 2026

View reviewed changes

itsjanajana force-pushed the fix-notebook-scroll-grader branch from 18e6cf8 to ff071a1 Compare March 21, 2026 23:03

dagemcn self-requested a review March 24, 2026 00:32

automateprojectmangement Bot moved this from Seeking Reviewer to In Review in Submitty Development Mar 24, 2026

dagemcn requested changes Mar 24, 2026

View reviewed changes

github-project-automation Bot moved this from In Review to Work in Progress in Submitty Development Mar 24, 2026

dagemcn changed the title ~~[Bugfix:TA Grading] Fix Notebook scroll~~ [Bugfix:TAGrading] Fix Notebook scroll Mar 24, 2026

dagemcn self-assigned this Mar 24, 2026

Remove redundant condition and fix codebox resize behavior

a291e3b

Merge branch 'main' into fix-notebook-scroll-grader

09a115c

itsjanajana requested a review from dagemcn April 1, 2026 12:34

automateprojectmangement Bot moved this from Work in Progress to In Review in Submitty Development Apr 1, 2026

Merge branch 'main' into fix-notebook-scroll-grader

11a154a

dagemcn approved these changes Apr 3, 2026

View reviewed changes

github-project-automation Bot moved this from In Review to Awaiting Maintainer Review in Submitty Development Apr 3, 2026

Merge branch 'main' into fix-notebook-scroll-grader

a94f980

bmcutler merged commit 6d3367e into Submitty:main Apr 15, 2026
24 of 25 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Bugfix:TAGrading] Fix Notebook scroll#12603

[Bugfix:TAGrading] Fix Notebook scroll#12603
bmcutler merged 5 commits into
Submitty:mainfrom
itsjanajana:fix-notebook-scroll-grader

itsjanajana commented Mar 18, 2026

Uh oh!

Benny-Dav left a comment

Uh oh!

Benny-Dav Mar 21, 2026

Uh oh!

codecov Bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

dagemcn left a comment

Uh oh!

itsjanajana commented Mar 28, 2026

Uh oh!

dagemcn left a comment •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

itsjanajana commented Mar 18, 2026

Why is this Change Important & Necessary?

What is the New Behavior?

What steps should a reviewer take to reproduce or test the bug or new feature?

Automated Testing & Documentation

Other information

Code Changes

Uh oh!

Benny-Dav left a comment

Choose a reason for hiding this comment

Uh oh!

Benny-Dav Mar 21, 2026

Choose a reason for hiding this comment

Uh oh!

codecov Bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

dagemcn left a comment

Choose a reason for hiding this comment

Uh oh!

itsjanajana commented Mar 28, 2026

Uh oh!

dagemcn left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov Bot commented Mar 24, 2026 •

edited

Loading

dagemcn left a comment •

edited

Loading