Pass down the stream ref to not be the wrapping element

src/App.tsx

@@ -36,10 +36,7 @@ export function App() {
   const location = useLocation()
   const filePath = useAbsoluteFilePath()
   const { onProjectOpen } = useLspContext()
-  // We need the ref for the outermost div so we can screenshot the app for
-  // the coredump.
-  const ref = useRef<HTMLDivElement>(null)
-  const { state: modelingState } = useModelingContext()
+  const { state: modelingState, streamRef } = useModelingContext()
 
   const projectName = project?.name || null
   const projectPath = project?.path || null
@@ -81,8 +78,8 @@ export function App() {
   useEngineConnectionSubscriptions()
 
   return (
-    <div className="h-screen w-full flex flex-col">
-      <div className="relative flex flex-1 flex-col" ref={ref}>
+    <div className="h-screen flex flex-col overflow-hidden select-none">
+      <div className="relative flex flex-1 flex-col" ref={streamRef}>
         <AppHeader
           className={'transition-opacity transition-duration-75 ' + paneOpacity}
           project={{ project, file }}

src/components/ModelingMachineProvider.tsx

@@ -90,6 +90,7 @@ type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
   context: ContextFrom<T>
   send: Prop<Actor<T>, 'send'>
+  streamRef: React.RefObject<HTMLDivElement>
 }
 
 export const ModelingMachineContext = createContext(
@@ -1090,16 +1091,10 @@ export const ModelingMachineProvider = ({
         state: modelingState,
         context: modelingState.context,
         send: modelingSend,
+        streamRef,
       }}
     >
-      {/* TODO #818: maybe pass reff down to children/app.ts or render app.tsx directly?
-      since realistically it won't ever have generic children that isn't app.tsx */}
-      <div
-        className="flex flex-col h-screen overflow-hidden select-none"
-        ref={streamRef}
-      >
-        {children}
-      </div>
+      {children}
     </ModelingMachineContext.Provider>
   )
 }