Merge branch 'main' into kurt-remove-clickable-gaps

src/App.tsx

@@ -137,10 +137,15 @@ export function App() {
         enableMenu={true}
       />
       <ModalContainer />
+      <div className="h-full">
+        <div className="h-full flex">
+          <div className="h-full w-5 z-10 pointer-events-auto"></div>
+          <div className="flex flex-col">
+            <div className="h-5 z-10 pointer-events-auto"></div>
             <Resizable
               className={
-          'pointer-events-none h-full flex flex-col flex-1 z-10 my-5 ml-5 pr-1 transition-opacity transition-duration-75 ' +
-          paneOpacity
+                'pointer-events-none h-full flex flex-col flex-1 z-10 pr-1 transition-opacity transition-duration-75 ' +
+                +paneOpacity
               }
               defaultSize={{
                 width: '550px',
@@ -193,6 +198,10 @@ export function App() {
                 </section>
               </div>
             </Resizable>
+            <div className="h-5 z-10 pointer-events-auto"></div>
+          </div>
+        </div>
+      </div>
       <Stream className="absolute inset-0 z-0" />
       {showDebugPanel && (
         <DebugPanel

src/components/CollapsiblePanel.module.css

@@ -39,22 +39,7 @@
 }
 
 .panel[open] {
-  @apply relative flex-grow max-h-full h-48 my-1 rounded;
-}
-
-/*
-  Open panels have a little bit of a buffer around them
-  to make it harder to accidentally click or interact with the stream behind them.
-  The right side buffer is a little smaller so people don't get frustrated by it.
-  TODO: make this logic flexible for if the panel is on the right side of the screen.
-*/
-.panel[open]::before {
-  @apply absolute -inset-5 -top-2 -right-1 z-0;
-  @apply content-[''];
-}
-
-.panel[open]:first-of-type::before {
-  @apply -top-5;
+  @apply flex-grow max-h-full h-48 my-1 rounded;
 }
 
 .panel[open] + .panel[open],