Merge pull request #255 from cantemizyurek/sheet-overlay-backdrop

Sheet overlay backdrop

Author: mattpocock

.changeset/real-phones-join.md

@@ -0,0 +1,5 @@
+---
+"evalite-ui": patch
+---
+
+Added an overlay to the backdrop when viewing a trace

apps/evalite-ui/app/routes/suite.$name.eval.$evalIndex.tsx

@@ -231,7 +231,7 @@ function ResultComponent() {
         </div>
       </div>
       <div className="flex-1 overflow-y-auto overflow-x-hidden w-full min-w-0">
-        <div className="flex flex-row h-full">
+        <div className="flex flex-row min-h-full">
           <div className="w-44 flex flex-col gap-3 flex-shrink-0 p-2">
             <TraceMenuItem
               duration={endTime - startTime}

apps/evalite-ui/app/routes/suite.$name.tsx

@@ -550,6 +550,22 @@ function SuiteComponent() {
           </>
         )}
       </InnerPageLayout>
+      {/* Sheet Overlay backdrop */}
+      {isEvalRoute && (
+        <div
+          className={cn(
+            "fixed inset-0 z-10 bg-black/50 backdrop-blur-xs transition-opacity duration-300",
+            "animate-in fade-in-0"
+          )}
+          onClick={() => {
+            navigate({
+              to: "/suite/$name",
+              params: { name },
+              search: { timestamp },
+            });
+          }}
+        />
+      )}
       <div
         className={cn(
           "fixed top-0 z-20 h-svh border-l p-2 bg-sidebar overflow-auto",