fit speed grader right side using relative positioning

In SpeedGrader™, when tabbing through a Rubric, the component will scroll
down to keep the currently-focused field in view. When this occurs, the
'Add a Comment' section will float upwards, on top of the Rubric fields. A
style issue for nested, absolutely-positioned elements caused this
behavior. Relatively-positioned elements should be used as an immediate
child of absolutely-positioned elements to avoid issues like this.

fixes CNVS-27704

test plan:
1. Create an Assignment
2. Add a Rubric with 10 or more Criterion
3. Enter SpeedGrader™ and click 'View Rubric'
4. Click in the last visible input field
5. Begin tabbing through Rubric fields
6. Verify that the 'Add a Comment' section remains at the bottom

Change-Id: I61084f41f248c94d047dcc39d431bb5c924a463f
Reviewed-on: https://gerrit.instructure.com/76038
Tested-by: Jenkins
Reviewed-by: Cameron Matheson <[email protected]>
Reviewed-by: Shahbaz Javeed <[email protected]>
Reviewed-by: Spencer Olson <[email protected]>
QA-Review: KC Naegle <[email protected]>
Product-Review: Christi Wruck

app/stylesheets/bundles/speed_grader.scss

@@ -381,6 +381,7 @@ $gradebook_header_height: 52px;
   #rightside_inner {
     @extend %flex-1;
     overflow-y: auto;
+    position: relative;
   }
   #not_gradeable_message {
     padding: 20px;