Add transparent buffer around open panels

src/App.tsx

@@ -140,7 +140,7 @@ export function App() {
       <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
+          paneOpacity
         }
         defaultSize={{
           width: '550px',

src/components/CollapsiblePanel.module.css

@@ -39,7 +39,18 @@
 }
 
 .panel[open] {
-  @apply flex-grow max-h-full h-48 my-1 rounded;
+  @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-4 -right-1 z-0;
+  @apply content-[''];
 }
 
 .panel[open] + .panel[open],