@localstack/appinspector-ui 1.0.136 → 1.0.137

package/dist/index.cjs

@@ -18681,11 +18681,12 @@ var AppInspectorContextProvider = (props) => {
   const contextValue = (0, import_react45.useMemo)(
     () => ({
       deploymentContainer,
+      headerHeight: props.headerHeight ?? 0,
       linkComponent: props.linkComponent,
       localstackEndpoint: props.localstackEndpoint,
       resolveLink
     }),
-    [deploymentContainer, props.linkComponent, props.localstackEndpoint, resolveLink]
+    [deploymentContainer, props.headerHeight, props.linkComponent, props.localstackEndpoint, resolveLink]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(StatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
 };
@@ -31951,7 +31952,6 @@ var TraceGraph = ({
 
 // src/pages/trace-graph-page.tsx
 var import_jsx_runtime145 = require("react/jsx-runtime");
-var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
   flexGrow: 1,
@@ -31968,11 +31968,11 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
     })
   }
 }));
-var StyledDrawer = (0, import_styles.styled)(import_material23.Drawer)(() => ({
+var StyledDrawer = (0, import_styles.styled)(import_material23.Drawer)(({ headerHeight }) => ({
   "& .MuiDrawer-paper": {
     bottom: 0,
     boxSizing: "border-box",
-    height: `calc(100% - ${HEADER_HEIGHT.toString()}px)`,
+    height: `calc(100% - ${headerHeight.toString()}px)`,
     overflowY: "auto",
     top: "auto",
     width: DRAWER_WIDTH
@@ -31986,6 +31986,7 @@ var TraceGraphView = ({
   fetchSpans,
   handleClose,
   handleEventSelect,
+  headerHeight,
   loading,
   navigateToSpansList,
   open,
@@ -32047,7 +32048,7 @@ var TraceGraphView = ({
                 ) })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
+            /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(StyledDrawer, { anchor: "right", headerHeight, open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
           ]
         }
       )
@@ -32090,6 +32091,7 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
+  const { headerHeight } = useAppInspector();
   const [spans, setSpans] = (0, import_react63.useState)();
   const [loading, setLoading] = (0, import_react63.useState)(false);
   const [fetchError, setFetchError] = (0, import_react63.useState)();
@@ -32135,6 +32137,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
         setOpen(false);
       },
       handleEventSelect,
+      headerHeight,
       loading,
       navigateToSpansList,
       open,