fix(app): review panel transition

Author: adamdotdevin

packages/app/src/pages/session/session-side-panel.tsx

@@ -55,11 +55,6 @@ export function SessionSidePanel(props: {
     if (reviewOpen()) return `calc(100% - ${layout.session.width()}px)`
     return `${layout.fileTree.width()}px`
   })
-  const reviewWidth = createMemo(() => {
-    if (!reviewOpen()) return "0px"
-    if (!fileOpen()) return "100%"
-    return `calc(100% - ${layout.fileTree.width()}px)`
-  })
   const treeWidth = createMemo(() => (fileOpen() ? `${layout.fileTree.width()}px` : "0px"))
 
   const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
@@ -231,9 +226,8 @@ export function SessionSidePanel(props: {
         inert={!open()}
         class="relative min-w-0 h-full flex shrink-0 overflow-hidden bg-background-base"
         classList={{
-          "opacity-100": open(),
-          "opacity-0 pointer-events-none": !open(),
-          "transition-[width,opacity] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
+          "pointer-events-none": !open(),
+          "transition-[width] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
             !props.size.active(),
         }}
         style={{ width: panelWidth() }}
@@ -242,14 +236,10 @@ export function SessionSidePanel(props: {
           <div
             aria-hidden={!reviewOpen()}
             inert={!reviewOpen()}
-            class="relative min-w-0 h-full shrink-0 overflow-hidden bg-background-base"
+            class="relative min-w-0 h-full flex-1 overflow-hidden bg-background-base"
             classList={{
-              "opacity-100": reviewOpen(),
-              "opacity-0 pointer-events-none": !reviewOpen(),
-              "transition-[width,opacity] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
-                !props.size.active(),
+              "pointer-events-none": !reviewOpen(),
             }}
-            style={{ width: reviewWidth() }}
           >
             <div class="size-full min-w-0 h-full bg-background-base">
               <DragDropProvider
@@ -385,9 +375,8 @@ export function SessionSidePanel(props: {
             inert={!fileOpen()}
             class="relative min-w-0 h-full shrink-0 overflow-hidden"
             classList={{
-              "opacity-100": fileOpen(),
-              "opacity-0 pointer-events-none": !fileOpen(),
-              "transition-[width,opacity] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
+              "pointer-events-none": !fileOpen(),
+              "transition-[width] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
                 !props.size.active(),
             }}
             style={{ width: treeWidth() }}