[Bugfix:InstructorUI] Recentering Grading Panel Navbar#12914
Conversation
The grading navbar used to be centered, so I reverted the css to how it was before the css was changed.
manually calls a resize event when the page is first initialized so the layout matches the window dimensions from the start. Resize triggers the 2 layout functions above the call.
This reverts commit 85e3e87.
manually calls a resize event when the page is first initialized so the layout matches the window dimensions from the start. Resize triggers the 2 layout functions above the call.
NicholasCiuica
changed the title
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #12914 +/- ##
============================================
- Coverage 21.48% 21.48% -0.01%
Complexity 9842 9842
============================================
Files 268 268
Lines 36851 36852 +1
Branches 495 495
============================================
Hits 7919 7919
- Misses 28441 28442 +1
Partials 491 491
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
github-project-automation
Bot
moved this from Seeking Reviewer
to Awaiting Maintainer Review
in Submitty Development
dandrecollins07-ctrl
left a comment
dandrecollins07-ctrl
left a comment
There was a problem hiding this comment.
After testing, the navbar is centered. However, the students name does not disappear based on the size of the tab. (Tested on Chrome)
|
Tested on macOS on both Chrome and Safari. Confirmed that navbar is left-aligned on main. Then on this branch, navbar is confirmed to be centered. Tested twice with a collapsed left column as well as with full-screen mode -- navbar stays centered while browser window was resized. Student name was also observed to disappear on smaller widths. When reloaded in that state, student name stays hidden. Overall, new feature seems to be functioning as expected on my machine. |
on some machines, the student name never disappears after overlapping, and this commit adds some console logs to test why
|
I've just made a commit that ads some console.logs for testing the student name disappearing in the top-left of the grading panel. To test, go to the grading interface, open dev tools, and note the console.logs. Increase/decrease the width of the screen and note whether the overlapping boolean is ever displayed as true. The amount of overlap is calculated as (the left of the buttons in the top bar) - (the right of the student name). Check if this number looks accurate given the screen width. Please send screenshots if you test. |
|
After some testing, it seems the resize event does not trigger on some people's machines, so the student name in the top-right corner never gets hidden after overlapping with the buttons in the top bar. However, this issue seems outside the scope of this PR, and the recentering of the navbar has been confirmed on multiple reviewers' machines, so I think this PR is ready to be merged. |
github-project-automation
Bot
moved this from Awaiting Maintainer Review
to Done
in Submitty Development
5 participants
Why is this Change Important & Necessary?
The grading panel's navbar used to be centered (in Spring 2026 and probably before). However, the CSS for this element has recently been changed and it is now left-aligned along with the name of the student who made the submission in the top-left. This pushes the navbar to different parts of the screen depending on the length of the student's name.
What is the New Behavior?
The grading navbar is now centered, as it was before, and the student's name in the top left was reverted to having position:absolute. Also, I have added that a resize event will be manually triggered when the page is first initialized, so you don't have to resize the page manually to trigger the functions which properly create the layout.
Before vs After:
What steps should a reviewer take to reproduce or test the bug or new feature?
Automated Testing & Documentation
No new tests added
Changes tested on Chrome, Firefox, and Edge browsers