Make it possible to start selections from below the dope sheet's rows

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx

@@ -33,7 +33,8 @@ const Container = styled.div<{isShiftDown: boolean}>`
 
 const DopeSheetSelectionView: React.FC<{
   layoutP: Pointer<SequenceEditorPanelLayout>
-}> = ({layoutP, children}) => {
+  height: number
+}> = ({layoutP, children, height}) => {
   const [containerRef, containerNode] = useRefAndState<HTMLDivElement | null>(
     null,
   )
@@ -43,7 +44,12 @@ const DopeSheetSelectionView: React.FC<{
   selectionBoundsRef.current = selectionBounds
 
   return (
-    <Container ref={containerRef} isShiftDown={isShiftDown}>
+    <Container
+      style={{height: height + 'px'}}
+      ref={containerRef}
+      isShiftDown={isShiftDown}
+      className="selectionview"
+    >
       {selectionBounds && (
         <SelectionRectangle state={selectionBounds} layoutP={layoutP} />
       )}

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Right.tsx

@@ -40,6 +40,7 @@ const Right: React.FC<{
     const tree = val(layoutP.tree)
     const height =
       val(layoutP.tree.top) +
+      // stretch the height of the dope sheet in case the rows don't cover its whole vertical space
       Math.max(
         val(layoutP.tree.heightIncludingChildren),
         val(layoutP.dopeSheetDims.height),
@@ -48,7 +49,7 @@ const Right: React.FC<{
     return (
       <>
         <HorizontallyScrollableArea layoutP={layoutP} height={height}>
-          <DopeSheetSelectionView layoutP={layoutP}>
+          <DopeSheetSelectionView layoutP={layoutP} height={height}>
             <ListContainer style={{top: tree.top + 'px'}}>
               <SheetRow leaf={tree} layoutP={layoutP} />
             </ListContainer>