Make presentation invisible overlays across entire screen

Author: Brikaa

excalidraw-app/presentation/Presentation.scss

@@ -4,6 +4,7 @@
   background: black;
   display: grid;
   place-items: center;
+  position: relative;
   canvas {
     cursor: default !important;
   }

excalidraw-app/presentation/Presentation.tsx

@@ -262,21 +262,20 @@ export function PresentationScene(props: {
   // Render
   return (
     <div className="presentation-presentation" ref={presentationSceneDiv}>
+      {/* Used for navigating slides using the mouse */}
+      <div className="presentation-overlays">
+        <div className="presentation-overlay" onClick={prevSlide}></div>
+        <div className="presentation-overlay" onClick={nextSlide}></div>
+      </div>
+
       {/* We want the canvas to be in a div that has the exact same size as the scaled (zoomed in) frame */}
       {/* The rest is going to be black through the outer div */}
       <div
         style={{
           width: `${frames[frameIndex].width * scale}px`,
           height: `${frames[frameIndex].height * scale}px`,
-          position: "relative",
         }}
       >
-        {/* Used for navigating slides using the mouse */}
-        <div className="presentation-overlays">
-          <div className="presentation-overlay" onClick={prevSlide}></div>
-          <div className="presentation-overlay" onClick={nextSlide}></div>
-        </div>
-
         <Excalidraw
           excalidrawAPI={loadExcalidrawAPI}
           viewModeEnabled