ai-design-system 0.1.23 → 0.1.25

package/components/blocks/SectionLayout/SectionLayout.stories.tsx

@@ -1,6 +1,32 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { SectionLayout } from './SectionLayout'
 
+function ScrollablePanelContent({
+  description,
+  items,
+  title,
+}: {
+  description: string
+  items: string[]
+  title: string
+}) {
+  return (
+    <div className="flex min-h-0 flex-col gap-3 rounded-lg border bg-muted p-4">
+      <div>
+        <h3 className="mb-1 font-medium">{title}</h3>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+      <div className="grid gap-2">
+        {items.map((item, index) => (
+          <div key={`${title}-${index}`} className="rounded-md border bg-background px-3 py-2 text-sm">
+            {item}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 /**
  * SectionLayout Block Stories
  *
@@ -274,3 +300,83 @@ export const AccentDragHandles: Story = {
     )
   },
 }
+
+/**
+ * Independent Panel Scrolling
+ *
+ * Demonstrates that each panel owns its own vertical scroll region.
+ */
+export const IndependentPanelScrolling: Story = {
+  render: () => {
+    const leftItems = Array.from({ length: 24 }, (_, index) => `Run record ${index + 1}`)
+    const centerItems = Array.from({ length: 18 }, (_, index) => `Trace span ${index + 1}`)
+    const rightItems = Array.from({ length: 20 }, (_, index) => `Details block ${index + 1}`)
+
+    const sections = [
+      {
+        id: 'left-scroll-panel',
+        content: (
+          <ScrollablePanelContent
+            title="Left Panel"
+            description="Scroll this panel independently. The center and right panels should keep their own scroll positions."
+            items={leftItems}
+          />
+        ),
+        defaultSize: 25,
+        minSize: 20,
+        header: {
+          tabs: [{ value: 'runs', label: 'runs' }],
+          defaultTab: 'runs',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'center-scroll-panel',
+        content: (
+          <ScrollablePanelContent
+            title="Center Panel"
+            description="This panel should keep a separate scrollbar from the left list and the right details column."
+            items={centerItems}
+          />
+        ),
+        defaultSize: 50,
+        minSize: 35,
+        header: {
+          tabs: [{ value: 'trace', label: 'trace' }],
+          defaultTab: 'trace',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'right-scroll-panel',
+        content: (
+          <ScrollablePanelContent
+            title="Right Panel"
+            description="Use this to confirm the details panel can overflow and scroll without affecting the other panels."
+            items={rightItems}
+          />
+        ),
+        defaultSize: 25,
+        minSize: 20,
+        header: {
+          tabs: [{ value: 'details', label: 'details' }],
+          defaultTab: 'details',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+    ]
+
+    return (
+      <div className="h-screen p-4">
+        <SectionLayout
+          sections={sections}
+          storageKey="section-layout-independent-scroll"
+          dragHandleColor="primary"
+        />
+      </div>
+    )
+  },
+}

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -26,11 +26,11 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     const transformedSections = sections.map(section => ({
       ...section,
       content: (
-        <div className="h-full min-h-0 flex flex-col">
+        <div className="h-full min-h-0 flex flex-col overflow-hidden">
           {section.header && (
             <AppHeader {...section.header} />
           )}
-          <div className="min-h-0 flex-1">
+          <div className="min-h-0 flex-1 overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
             {section.content}
           </div>
         </div>

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -454,7 +454,7 @@ export function EnhancedDataTable({
   }, [handlers, table])
 
   return (
-    <div className={`flex w-full flex-col justify-start gap-6 ${className ?? ""}`}>
+    <div className={`flex min-h-0 w-full flex-1 flex-col justify-start gap-6 overflow-hidden ${className ?? ""}`}>
       <div className="flex items-center justify-between gap-2 px-4 lg:px-6">
         <div className="flex items-center gap-2 [&>button]:h-8">
           <Input
@@ -503,8 +503,8 @@ export function EnhancedDataTable({
         </div>
       </div>
 
-      <div className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6">
-        <div className="overflow-hidden rounded-lg border">
+      <div className="relative flex min-h-0 flex-1 flex-col gap-4 overflow-hidden px-4 lg:px-6">
+        <div className="overflow-x-auto overflow-y-hidden rounded-lg border [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
           <DndContext
             collisionDetection={closestCenter}
             modifiers={[restrictToVerticalAxis]}

package/components/composites/WorkflowRunObservabilityPanel/WorkflowRunObservabilityPanel.tsx

@@ -282,7 +282,7 @@ export const WorkflowRunObservabilityTracePanel = React.memo<WorkflowRunObservab
                 </div>
               </div>
 
-              <div className="min-h-0 flex-1 overflow-auto p-2">
+              <div className="min-h-0 flex-1 overflow-auto p-2 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
                 {spans.length === 0 ? (
                   <div className="text-[#8a8c96] text-sm">No spans yet.</div>
                 ) : (
@@ -325,7 +325,7 @@ export const WorkflowRunObservabilityTracePanel = React.memo<WorkflowRunObservab
           </TabsContent>
 
           <TabsContent className="min-h-0 flex-1 overflow-hidden" value="events">
-            <div className="h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3">
+            <div className="h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
               {events.length === 0 ? (
                 <div className="text-[#8a8c96] text-sm">No events yet.</div>
               ) : (
@@ -345,7 +345,7 @@ export const WorkflowRunObservabilityTracePanel = React.memo<WorkflowRunObservab
           </TabsContent>
 
           <TabsContent className="min-h-0 flex-1 overflow-hidden" value="streams">
-            <div className="h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3">
+            <div className="h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
               {streams.length === 0 ? (
                 <div className="text-[#8a8c96] text-sm">No streams yet.</div>
               ) : (
@@ -355,7 +355,7 @@ export const WorkflowRunObservabilityTracePanel = React.memo<WorkflowRunObservab
                       <div className="font-medium">{stream.channel}</div>
                       <div className="text-[#8a8c96]">{stream.timestamp ?? ""}</div>
                     </div>
-                    <pre className="mt-1 overflow-auto font-mono text-xs text-[#cfd1d9]">{stream.payload}</pre>
+                    <pre className="mt-1 overflow-auto font-mono text-xs text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">{stream.payload}</pre>
                   </div>
                 ))
               )}
@@ -413,7 +413,7 @@ export const WorkflowRunObservabilityDetailsPanel = React.memo<WorkflowRunObserv
           </div>
         </div>
 
-        <div className="mt-3 min-h-0 flex-1 space-y-3 overflow-y-auto pr-1">
+        <div className="mt-3 min-h-0 flex-1 space-y-3 overflow-y-auto pr-1 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
 
         <div className="space-y-3 text-xs">
           <div>
@@ -467,23 +467,23 @@ export const WorkflowRunObservabilityDetailsPanel = React.memo<WorkflowRunObserv
 
           <div className="space-y-2 pt-2">
             <div className="text-[#8a8c96] text-xs uppercase tracking-wide">Arguments</div>
-            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9]">{formatPayload(selectedSpan.argumentsPayload ?? run.argumentsPayload)}</pre>
+            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">{formatPayload(selectedSpan.argumentsPayload ?? run.argumentsPayload)}</pre>
           </div>
 
           <div className="space-y-2">
             <div className="text-[#8a8c96] text-xs uppercase tracking-wide">Input</div>
-            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9]">{formatPayload(selectedSpan.inputPayload ?? run.inputPayload)}</pre>
+            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">{formatPayload(selectedSpan.inputPayload ?? run.inputPayload)}</pre>
           </div>
 
           <div className="space-y-2">
             <div className="text-[#8a8c96] text-xs uppercase tracking-wide">Output</div>
-            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9]">{formatPayload(selectedSpan.outputPayload ?? run.outputPayload)}</pre>
+            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">{formatPayload(selectedSpan.outputPayload ?? run.outputPayload)}</pre>
           </div>
         </div>
 
         <div className="space-y-2 border-t border-[#23242a] pt-3">
           <div className="font-medium text-sm">Events ({events.length})</div>
-          <div className="max-h-32 divide-y divide-[#23242a] overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f]">
+          <div className="max-h-32 divide-y divide-[#23242a] overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
             {events.slice(0, 3).map((event) => (
               <div className="px-2 py-1 text-xs" key={event.id}>
                 <div>{event.title}</div>

package/components/features/FormReportsFeature/FormReportsFeature.tsx

@@ -102,7 +102,7 @@ export const FormReportsFeature = React.memo<FormReportsFeatureProps>(
     )
 
     return (
-      <div className={`flex flex-1 flex-col gap-4 py-4 md:gap-6 md:py-6 ${className ?? ""}`}>
+      <div className={`flex min-h-0 flex-1 flex-col gap-4 overflow-hidden py-4 md:gap-6 md:py-6 ${className ?? ""}`}>
         <FormReportsSection
           onCreateClick={showCreateButton ? () => openDrawer("create") : undefined}
           createButtonLabel={createButtonLabel}

package/components/features/PageLayout/PageLayout.tsx

@@ -136,7 +136,7 @@ export const PageLayout = React.memo<PageLayoutProps>(
         <AppSidebar {...sidebar} />
         <PageContainer className={`overflow-hidden ${className ?? ""}`}>
           <AppHeader {...header} />
-          <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
+          <div className={`min-h-0 flex-1 overflow-x-hidden ${layoutSections ? "overflow-hidden" : "overflow-y-auto"}`}>
             {contentArea}
           </div>
         </PageContainer>

package/components/features/WorkflowObservabilityFeature/WorkflowObservabilityFeature.tsx

@@ -65,7 +65,7 @@ function buildObservabilitySections({
   return [
     {
       ...traceSection,
-      defaultSize: 70,
+      defaultSize: 66.67,
       minSize: 55,
     },
     {
@@ -80,7 +80,7 @@ function buildObservabilitySections({
           spans={spans}
         />
       ),
-      defaultSize: 30,
+      defaultSize: 33.33,
       minSize: 25,
     },
   ]

package/dist/index.cjs

@@ -7415,7 +7415,7 @@ function EnhancedDataTable({
     const visibleColumnIds = table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide() && column.getIsVisible()).map((column) => column.id);
     (_a2 = handlers == null ? void 0 : handlers.onColumnsChange) == null ? void 0 : _a2.call(handlers, visibleColumnIds);
   }, [handlers, table]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex w-full flex-col justify-start gap-6 ${className != null ? className : ""}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex min-h-0 w-full flex-1 flex-col justify-start gap-6 overflow-hidden ${className != null ? className : ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-4 lg:px-6", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 [&>button]:h-8", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7459,8 +7459,8 @@ function EnhancedDataTable({
         rightActions
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-4 overflow-auto px-4 lg:px-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col gap-4 overflow-hidden px-4 lg:px-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto overflow-y-hidden rounded-lg border [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
         core$1.DndContext,
         {
           collisionDetection: core$1.closestCenter,
@@ -8497,7 +8497,7 @@ var WorkflowRunObservabilityTracePanel = React33__namespace.memo(
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-right", children: "1m 30s" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto p-2", children: spans.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96] text-sm", children: "No spans yet." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: spans.map((span, index) => {
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto p-2 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: spans.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96] text-sm", children: "No spans yet." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: spans.map((span, index) => {
             var _a2, _b2, _c2, _d2, _e2;
             const selected = selectedSpanId === span.id;
             const left = (_a2 = span.startPercent) != null ? _a2 : index * 10;
@@ -8535,7 +8535,7 @@ var WorkflowRunObservabilityTracePanel = React33__namespace.memo(
             );
           }) }) })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { className: "min-h-0 flex-1 overflow-hidden", value: "events", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3", children: events.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96] text-sm", children: "No events yet." }) : events.map((event) => {
+        /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { className: "min-h-0 flex-1 overflow-hidden", value: "events", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: events.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96] text-sm", children: "No events yet." }) : events.map((event) => {
           var _a2;
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-[#2a2a2f] bg-[#090a0f] p-2", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
@@ -8545,14 +8545,14 @@ var WorkflowRunObservabilityTracePanel = React33__namespace.memo(
             event.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[#8a8c96] text-xs", children: event.description }) : null
           ] }, event.id);
         }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { className: "min-h-0 flex-1 overflow-hidden", value: "streams", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3", children: streams.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96] text-sm", children: "No streams yet." }) : streams.map((stream) => {
+        /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { className: "min-h-0 flex-1 overflow-hidden", value: "streams", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: streams.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96] text-sm", children: "No streams yet." }) : streams.map((stream) => {
           var _a2;
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-[#2a2a2f] bg-[#090a0f] p-2", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: stream.channel }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96]", children: (_a2 = stream.timestamp) != null ? _a2 : "" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-1 overflow-auto font-mono text-xs text-[#cfd1d9]", children: stream.payload })
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-1 overflow-auto font-mono text-xs text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: stream.payload })
           ] }, stream.id);
         }) }) })
       ] })
@@ -8599,7 +8599,7 @@ var WorkflowRunObservabilityDetailsPanel = React33__namespace.memo(
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 min-h-0 flex-1 space-y-3 overflow-y-auto pr-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 min-h-0 flex-1 space-y-3 overflow-y-auto pr-1 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 text-xs", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96]", children: "Span" }),
@@ -8645,15 +8645,15 @@ var WorkflowRunObservabilityDetailsPanel = React33__namespace.memo(
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 pt-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96] text-xs uppercase tracking-wide", children: "Arguments" }),
-            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9]", children: formatPayload((_j = selectedSpan.argumentsPayload) != null ? _j : run.argumentsPayload) })
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: formatPayload((_j = selectedSpan.argumentsPayload) != null ? _j : run.argumentsPayload) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96] text-xs uppercase tracking-wide", children: "Input" }),
-            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9]", children: formatPayload((_k = selectedSpan.inputPayload) != null ? _k : run.inputPayload) })
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: formatPayload((_k = selectedSpan.inputPayload) != null ? _k : run.inputPayload) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96] text-xs uppercase tracking-wide", children: "Output" }),
-            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9]", children: formatPayload((_l = selectedSpan.outputPayload) != null ? _l : run.outputPayload) })
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: formatPayload((_l = selectedSpan.outputPayload) != null ? _l : run.outputPayload) })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 border-t border-[#23242a] pt-3", children: [
@@ -8662,7 +8662,7 @@ var WorkflowRunObservabilityDetailsPanel = React33__namespace.memo(
             events.length,
             ")"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-32 divide-y divide-[#23242a] overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f]", children: events.slice(0, 3).map((event) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-1 text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-32 divide-y divide-[#23242a] overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: events.slice(0, 3).map((event) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-1 text-xs", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { children: event.title }),
             event.timestamp ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[#8a8c96]", children: event.timestamp }) : null
           ] }, event.id)) })
@@ -9134,9 +9134,9 @@ var SectionLayout = React33__namespace.memo(
       "className"
     ]);
     const transformedSections = sections.map((section) => __spreadProps(__spreadValues({}, section), {
-      content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full min-h-0 flex flex-col", children: [
+      content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full min-h-0 flex flex-col overflow-hidden", children: [
         section.header && /* @__PURE__ */ jsxRuntime.jsx(AppHeader, __spreadValues({}, section.header)),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: section.content })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: section.content })
       ] })
     }));
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9703,7 +9703,7 @@ var PageLayout = React33__namespace.memo(
           /* @__PURE__ */ jsxRuntime.jsx(AppSidebar, __spreadValues({}, sidebar)),
           /* @__PURE__ */ jsxRuntime.jsxs(PageContainer, { className: `overflow-hidden ${className != null ? className : ""}`, children: [
             /* @__PURE__ */ jsxRuntime.jsx(AppHeader, __spreadValues({}, header)),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden", children: contentArea })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-0 flex-1 overflow-x-hidden ${layoutSections ? "overflow-hidden" : "overflow-y-auto"}`, children: contentArea })
           ] })
         ]
       }
@@ -10294,7 +10294,7 @@ var FormReportsFeature = React33__namespace.memo(
       },
       [actionHandlers, fields]
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-1 flex-col gap-4 py-4 md:gap-6 md:py-6 ${className != null ? className : ""}`, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex min-h-0 flex-1 flex-col gap-4 overflow-hidden py-4 md:gap-6 md:py-6 ${className != null ? className : ""}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         FormReportsSection,
         {
@@ -10508,7 +10508,7 @@ function buildObservabilitySections({
   }
   return [
     __spreadProps(__spreadValues({}, traceSection), {
-      defaultSize: 70,
+      defaultSize: 66.67,
       minSize: 55
     }),
     {
@@ -10524,7 +10524,7 @@ function buildObservabilitySections({
           spans
         }
       ),
-      defaultSize: 30,
+      defaultSize: 33.33,
       minSize: 25
     }
   ];