fix: make sidebar sticky and remove padding (#3057)

Author: rpenido

src/generic/resizable/Resizable.tsx

@@ -62,13 +62,13 @@ export const ResizableBox = ({
 
   return (
     <div
-      className="resizable"
+      className="resizable align-self-stretch d-flex"
       ref={boxRef}
       style={{ width: `${width}px` }}
     >
       {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */}
       <div className="resizable-handle" onMouseDown={onMouseDown} />
-      <div className="w-100">
+      <div className="w-100 d-flex">
         {children}
       </div>
     </div>

src/generic/sidebar/Sidebar.tsx

@@ -96,7 +96,7 @@ export function Sidebar<T extends SidebarPages>({
   const activeKey = isOpen ? currentPageKey : undefined;
 
   return (
-    <Stack direction="horizontal" className="sidebar align-items-baseline ml-3" gap={2}>
+    <Stack direction="horizontal" className="align-items-baseline flex-fill overflow-hidden" gap={2}>
       {(isOpen && !!currentPageKey) ?
         (
           <ResizableBox>

src/generic/sidebar/index.scss

@@ -2,14 +2,16 @@
   position: sticky;
   top: 0;
   align-self: flex-start;
+  height: 100vh;
   max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  margin-left: 1rem;
 
   .sidebar-content {
     flex: 0 1 auto;
     min-width: 440px;
-    overflow-y: auto;
-    height: 100vh;
-    max-height: 100vh;
+    overflow: hidden auto;
 
     /*
      * Change the styles for tabs in all sidebars.

src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx

@@ -7,7 +7,7 @@ export const CourseAuthoringOutlineSidebarSlot = ({
   courseName,
   sections,
 }: CourseAuthoringOutlineSidebarSlotProps) => (
-  <div>
+  <div className="sidebar">
     <PluginSlot
       id="org.openedx.frontend.authoring.course_outline_sidebar.v1"
       idAliases={['course_authoring_outline_sidebar_slot']}

src/plugin-slots/CourseAuthoringUnitSidebarSlot/index.tsx

@@ -1,5 +1,8 @@
 import { PluginSlot } from '@openedx/frontend-plugin-framework/dist';
+import classNames from 'classnames';
+
 import { UnitSidebar } from '@src/course-unit/unit-sidebar/UnitSidebar';
+import { isUnitPageNewDesignEnabled } from '@src/course-unit/utils';
 
 export const CourseAuthoringUnitSidebarSlot = (
   {
@@ -12,7 +15,8 @@ export const CourseAuthoringUnitSidebarSlot = (
     isSplitTestType,
   }: CourseAuthoringUnitSidebarSlotProps,
 ) => (
-  <div className="pt-1" // This is to fix the vertical alignment of the sidebar
+  <div
+    className={classNames({ 'sidebar': isUnitPageNewDesignEnabled() })}
   >
     <PluginSlot
       id="org.openedx.frontend.authoring.course_unit_sidebar.v2"