fixup! fix: sidebar scrolling on mobile devices

Author: Agrendalath

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx

@@ -84,7 +84,7 @@ const CourseOutlineTray = () => {
     return (
       <div className={classNames('outline-sidebar-wrapper', {
         'flex-shrink-0 mr-4 h-auto': !shouldDisplayFullScreen,
-        'bg-white m-0 fixed-top w-100 vh-100': shouldDisplayFullScreen,
+        'bg-white m-0 fixed-top w-100': shouldDisplayFullScreen,
       })}
       >
         <section className="outline-sidebar w-100">
@@ -100,7 +100,7 @@ const CourseOutlineTray = () => {
   return (
     <div className={classNames('outline-sidebar-wrapper', {
       'flex-shrink-0 mr-4 h-auto': !shouldDisplayFullScreen,
-      'bg-white m-0 fixed-top w-100 vh-100': shouldDisplayFullScreen,
+      'bg-white m-0 fixed-top w-100': shouldDisplayFullScreen,
     })}
     >
       <section className="outline-sidebar w-100">

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss

@@ -9,8 +9,13 @@
         position: relative;
     }
 
-    // The fixed, full-height overlay needs its own scroll context.
+    // The fixed, full-height overlay needs its own scroll context. Height is owned
+    // here instead of Bootstrap's `vh-100`: iOS Safari resolves `100vh` to the large
+    // viewport (URL bar hidden), hiding the bottom of a long outline behind the bar.
+    // `100dvh` tracks the visible height; `100vh` is the fallback for older engines.
     &.fixed-top {
+        height: 100vh;
+        height: 100dvh;
         overflow-y: auto;
     }
 }