StudentGradeGrid: Student header (corner cell) goes underneath student name cells when scrolling vertically

Problem Description

In the StudentGradeGrid component, when scrolling vertically, the student header (corner cell with "Student" text) incorrectly renders underneath the student name cells from the table body. The header should stay on top of all other elements when scrolling.

Current Behavior

• ❌ Student header corner cell goes underneath student name cells during vertical scroll
• ✅ Horizontal sticky positioning works correctly
• ✅ Sorting functionality works correctly
• ✅ Regular table header stays sticky correctly

Expected Behavior

• ✅ Student header should always render above student name cells
• ✅ Should maintain highest z-index priority when scrolling in any direction

Technical Details

Location: frontend/src/lib/components/dashboard/StudentGradeGrid.svelte

Current Implementation Attempts:

1. Tried z-index hierarchy: z-50 (corner) > z-20 (thead) > z-10 (tbody cells)
2. Tried CSS !important overrides with z-index: 100 for corner cell
3. Tried position: sticky !important with explicit CSS classes
4. Added relative positioning to table container

Root Cause:
Likely a CSS stacking context conflict between thead and tbody sticky elements. Browsers may create separate stacking contexts for sticky elements within different table sections (thead vs tbody), causing DOM order to override z-index values.

Code References

Student Header (Corner Cell):

<th class="student-header sticky top-0 left-0 z-50 ...">

Student Name Cells:

<td class="student-cell sticky left-0 z-10 ...">

CSS Overrides Attempted:

thead th.student-header {
  position: sticky !important;
  z-index: 100 !important;
  background-color: rgb(249, 250, 251) !important;
}

tbody td.student-cell {
  position: sticky !important;
  z-index: 50 !important;  
  background-color: white !important;
}

Potential Solutions to Investigate

1. Restructure DOM: Move student header outside of thead into separate positioned container
2. CSS contain Property: Use CSS containment to control stacking contexts
3. Transform Hack: Use transform: translateZ(0) to force new stacking context
4. Table Layout Alternative: Consider using CSS Grid or flexbox instead of HTML table
5. Portals: Render sticky elements in separate DOM tree using Svelte portals

Acceptance Criteria

• [ ] Student header corner cell always renders above student name cells
• [ ] Maintains all existing functionality (sorting, horizontal/vertical scrolling)
• [ ] Works consistently across browsers (Chrome, Firefox, Safari)
• [ ] No visual glitches or z-index conflicts

Priority

Medium - Functionality works but visual layering is incorrect, affecting UX

---

🤖 Generated with Claude Code