SAK-50468 Grader should scroll with instructor on desktop instead of overlaying

library/src/skins/default/src/sass/modules/tool/grader/_base.scss

@@ -146,9 +146,6 @@ sakai-grader {
 
   #grader {
 
-    // We need this to be able to use @container queries
-    container-type: size;
-
     background-color: var(--sakai-title-bar-bg-color);
 
     .draft-submission {
@@ -164,6 +161,26 @@ sakai-grader {
       width: 60px;
     }
 
+    /* Add styles for card-based snippets with text truncation */
+    #feedback-snippet, #private-notes-snippet {
+      .card-body {
+        position: relative;
+        max-height: 100px;
+        overflow: hidden;
+
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 40px;
+          background: linear-gradient(to bottom, rgba(255,255,255,0), var(--sakai-background-color-1, #fff));
+          pointer-events: none;
+        }
+      }
+    }
+
     .fade-text {
       position: relative;
       color: black;
@@ -177,16 +194,8 @@ sakai-grader {
       pointer-events: none;
     }
 
-    .grader-snippet {
-      background-color: white;
-      div:first-child {
-        background-color: white;
-      }
-    }
-
     #grader-grade-block {
       border-bottom: 1px solid var(--sakai-border-color);
-      padding-top: 15px;
 
       input {
         margin-left: 10px;
@@ -529,4 +538,65 @@ sakai-grader {
       margin-bottom: 6px;
     }
   } //media tablet
+
+  @media (min-width: 992px) {
+    /* Desktop layout */
+    #grader {
+      position: sticky !important;
+      top: 0;
+      visibility: visible !important;
+      width: 400px;
+      transform: none !important;
+      border-left: 1px solid var(--sakai-border-color);
+      right: auto;
+      float: none;
+      flex: 0 0 400px;
+    }
+
+    /* Ensure the offcanvas body scrolls properly */
+    #grader .offcanvas-body {
+      height: calc(100vh - 90px); /* Subtract header height */
+      overflow-y: auto;
+      padding-bottom: 20px;
+    }
+
+    /* Fix the flex layout for desktop */
+    .d-flex.flex-column.flex-lg-row {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      flex-wrap: nowrap;
+      align-items: flex-start;
+      height: calc(100vh - 60px); /* Set a height for the container to enable scrolling */
+    }
+
+    /* Ensure the gradable container takes appropriate space and shows scrollbars */
+    #grader-gradable-container {
+      flex: 1;
+      height: 100%;
+      max-width: calc(100% - 420px);
+      margin-right: 20px;
+      overflow-y: scroll;
+    }
+
+    /* Ensure the gradable content area has proper height */
+    #grader-gradable-content {
+      height: auto;
+      min-height: 100%;
+    }
+  }
+
+  /* For mobile, keep the original offcanvas behavior */
+  @media (max-width: 991.98px) {
+    #grader {
+      width: 100%;
+      max-width: 100%;
+      position: fixed;
+    }
+
+    /* Show the "Grade Submission" button on mobile */
+    #grader-link-block {
+      display: block;
+    }
+  }
 }

webcomponents/bundle/src/main/bundle/grader.properties

@@ -20,8 +20,7 @@ recorded_feedback_label=Record some feedback
 add_attachments_tooltip=Add some attachments to your grading
 grade_this=Grade this
 private_notes_tooltip=Add notes attached to this student submission, for yourself and other \
-instructors and click Done when you've finished. Students will NOT be able to see these. You still \
-need to save the grade
+instructors and click Done when you've finished. Students will NOT be able to see these. 
 private_notes_label=Enter your private notes
 settings=Settings
 graded_status_label=Graded Status:
@@ -73,8 +72,8 @@ lti_grade_not_automatic=<b>Note:</b> When the LTI tool sends a grade to the serv
 destroy_rubric_panel_log=Failed to destroy rubric panel. Maybe it wasn't showing in the first place.
 submission_inline=Inline Submission
 assign_grade_overrides=Assign Grade Overrides
-feedback_instruction = Use the box below to enter additional summary comments about this \
-submission and click Done when you've finished. You still need to save the grade
+feedback_instruction = Use the box below to enter comments about this \
+submission. Click Done when finished.
 feedback_comment_label=Enter your feedback
 previous_submission_label=View the previous submission
 next_submission_label=View the next submission

webcomponents/tool/src/main/frontend/packages/sakai-grader/src/SakaiGrader.js

@@ -351,12 +351,19 @@ export class SakaiGrader extends graderRenderingMixin(gradableDataMixin(SakaiEle
     }
   }
 
+  _savePrivateNotes() {
+    // First toggle the editor (close it)
+    this._togglePrivateNotesEditor();
+
+    // Then save the data
+    this._save({});
+  }
+
   _toggleFeedbackCommentEditor() {
 
     this._feedbackCommentEditorShowing = !this._feedbackCommentEditorShowing;
 
     if (!this._feedbackCommentEditorShowing) {
-
       this._showingFullFeedbackComment = false;
       this._allFeedbackCommentVisible = false;
       this.updateComplete.then(() => this._setupVisibleFlags());
@@ -365,6 +372,14 @@ export class SakaiGrader extends graderRenderingMixin(gradableDataMixin(SakaiEle
     }
   }
 
+  _saveFeedbackComment() {
+    // First toggle the editor (close it)
+    this._toggleFeedbackCommentEditor();
+
+    // Then save the data
+    this._save({});
+  }
+
   _previewAttachment(e) {
 
     e.preventDefault();
@@ -521,7 +536,10 @@ export class SakaiGrader extends graderRenderingMixin(gradableDataMixin(SakaiEle
         this._saveSucceeded = false;
         this._gradeOrCommentsModified = false;
         const graderEl = document.getElementById("grader");
-        bootstrap.Offcanvas.getInstance(graderEl).hide();
+        const offcanvasInstance = bootstrap.Offcanvas.getInstance(graderEl);
+        if (offcanvasInstance) {
+          offcanvasInstance.hide();
+        }
       }, closeSidebarTimeout || 1000);
     })
     .catch (e => {
@@ -573,7 +591,10 @@ export class SakaiGrader extends graderRenderingMixin(gradableDataMixin(SakaiEle
       default:
     }
 
-    bootstrap.Offcanvas.getInstance(document.getElementById("grader")).hide();
+    const offcanvasInstance = bootstrap.Offcanvas.getInstance(document.getElementById("grader"));
+    if (offcanvasInstance) {
+      offcanvasInstance.hide();
+    }
   }
 
   _clearSubmission() {