[Bugfix:TAGrading] PDF header overlap fix#12766
Merged
bmcutler merged 3 commits intoApr 10, 2026
Merged
Conversation
automateprojectmangement
Bot
moved this from Seeking Reviewer
to In Review
in Submitty Development
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes an overlap bug in the TA grading embedded PDF viewer where long/wrapped filenames caused the file header to cover the top of page 1 by making the header participate in normal layout flow and updating scroll-to-page behavior accordingly.
Changes:
- Convert the file header bar from absolutely positioned overlay to a sticky, in-flow element and lay out
#file-viewas a flex column. - Update PDF/page scrolling logic to stop subtracting the header height when scrolling to a page.
- Adjust file content container sizing to work with the new flex layout.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| site/ts/ta-grading-rubric.ts | Updates scrollToPage to scroll directly to the target page offset without compensating for the header height. |
| site/public/js/pdf/PDFAnnotateEmbedded.js | Updates initial “scroll to page on load” logic to match the new header/layout behavior. |
| site/public/css/electronic.css | Makes #file-view a flex column and changes .sticky-file-info to position: sticky so the header no longer overlays PDF content. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #12766 +/- ##
=========================================
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
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
John-Roy123
approved these changes
Apr 10, 2026
John-Roy123
left a comment
John-Roy123
left a comment
Contributor
There was a problem hiding this comment.
The changes seem to work as intended, the title of the pdf remains visible no matter how I change the size of the screen. This is an improvement from how it is on main.
github-project-automation
Bot
moved this from In Review
to Awaiting Maintainer Review
in Submitty Development
github-project-automation
Bot
moved this from Awaiting Maintainer Review
to Done
in Submitty Development
GarvitKhandelwal31
added a commit
to GarvitKhandelwal31/Submitty
that referenced
this pull request
Apr 13, 2026
### Why is this Change Important & Necessary? Fixes Submitty#12763. In the TA grading file panel, long PDF filenames could cause the header to overlap the top of page 1, especially when the panel was narrow or the filename wrapped onto multiple lines. ### What is the New Behavior? The file header now flows with the layout instead of overlaying the PDF viewer. When the filename wraps, the header grows vertically and the PDF content begins below it, so the top of the first page stays visible. ### What steps should a reviewer take to reproduce or test the bug or new feature? 1. Log in as an instructor or TA. 2. Open the sample course and go to `grading_homework_pdf`. 3. Open `adamsg` and then open a PDF submission from the file browser. ( You can try with any student) 4. Narrow the browser or file panel until the filename wraps. 5. Verify that the top of page is still visible and is not covered by the header bar. https://github.com/user-attachments/assets/28be746c-fab4-4f5d-8e25-6347381bbfe7 ### Automated Testing & Documentation No new automated test was added. Validation was done manually in the TA grading UI by checking the PDF viewer at both wide and narrow panel widths. ### Other information This is not a breaking change. No migration is required.
bmcutler
pushed a commit
that referenced
this pull request
Apr 15, 2026
This reverts commit 258c709.
bmcutler
added a commit
that referenced
this pull request
Apr 15, 2026
bmcutler
added a commit
that referenced
this pull request
Jun 1, 2026
### Why is this Change Important & Necessary? Solves #12763 #12766 changes were reverted by the PR #12784 due to a bug identified in the PR #12779 In PR #12779 in mobile view seeing the PDF is very difficult due to this PDF header overlap. Screen recording of that- https://github.com/user-attachments/assets/f8c0b147-e8b9-494c-b763-ab772d9e2cd0 ### What is the New Behavior? This PR includes all the changes from #12766 while excluding the unnecessary portion identified in #12779. Also it fixes the poor PDF readability in mobile view. https://github.com/user-attachments/assets/78a5cce8-3a93-45c4-8f7a-57428873a8e2 ### What steps should a reviewer take to reproduce or test the bug or new feature? 1) Open TA Grading for a gradeable with PDF submissions. 2) Open a PDF in the Submissions and Results Browser. 3) Verify the top file header remains usable while scrolling the PDF content. 4) Resize browser to narrow/mobile width. 5) Confirm horizontal overflow is not locking the view and PDF remains scrollable/usable. 6) Use page navigation/jump behavior and confirm the expected page scroll target is reached. ### Automated Testing & Documentation No new automated tests were added in this PR (UI/layout and scroll behavior adjustment). ### Other information Breaking change: No. Migrations required: No. Security concerns: None identified. --------- Co-authored-by: Barb Cutler <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why is this Change Important & Necessary?
Fixes #12763. In the TA grading file panel, long PDF filenames could cause the header to overlap the top of page 1, especially when the panel was narrow or the filename wrapped onto multiple lines.
What is the New Behavior?
The file header now flows with the layout instead of overlaying the PDF viewer. When the filename wraps, the header grows vertically and the PDF content begins below it, so the top of the first page stays visible.
What steps should a reviewer take to reproduce or test the bug or new feature?
grading_homework_pdf.adamsgand then open a PDF submission from the file browser. ( You can try with any student)Screen.Recording.2026-04-08.105257.mp4
Automated Testing & Documentation
No new automated test was added. Validation was done manually in the TA grading UI by checking the PDF viewer at both wide and narrow panel widths.
Other information
This is not a breaking change. No migration is required.