From 586afddafcdaef8b3282862e097164abb120b6c6 Mon Sep 17 00:00:00 2001
From: Karakatiza666 <bulakh.96@gmail.com>
Date: Mon, 20 Jul 2026 20:00:49 +0000
Subject: [PATCH] [web-console] Fix incorrect background when scrolling
 Performance tab

Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
---
 .../lib/components/layout/InlineDrawer.svelte |  4 +-
 .../layout/InlineDrawer.svelte.spec.ts        | 45 +++++++++++++++++++
 .../pipelines/editor/TabPerformance.svelte    |  9 ++--
 3 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/js-packages/web-console/src/lib/components/layout/InlineDrawer.svelte b/js-packages/web-console/src/lib/components/layout/InlineDrawer.svelte
index 923872b9348..a599fb83988 100644
--- a/js-packages/web-console/src/lib/components/layout/InlineDrawer.svelte
+++ b/js-packages/web-console/src/lib/components/layout/InlineDrawer.svelte
@@ -40,7 +40,7 @@
 </script>
 
 {#snippet mainPane()}
-  <Pane order={mainOrder} minSize={mainMinSize} class="!overflow-visible">
+  <Pane order={mainOrder} minSize={mainMinSize} class="min-w-0 !overflow-visible">
     {@render main()}
   </Pane>
 {/snippet}
@@ -50,7 +50,7 @@
     defaultSize={percentValue(defaultSize)}
     minSize={percentValue(minSize)}
     maxSize={percentValue(maxSize)}
-    class="!overflow-visible"
+    class="min-w-0 !overflow-visible"
   >
     <div class="h-full {_class}">
       {@render children()}
diff --git a/js-packages/web-console/src/lib/components/layout/InlineDrawer.svelte.spec.ts b/js-packages/web-console/src/lib/components/layout/InlineDrawer.svelte.spec.ts
index 14a4d753738..6509776cada 100644
--- a/js-packages/web-console/src/lib/components/layout/InlineDrawer.svelte.spec.ts
+++ b/js-packages/web-console/src/lib/components/layout/InlineDrawer.svelte.spec.ts
@@ -51,4 +51,49 @@ describe('InlineDrawer', () => {
     expect(panes[0]?.textContent).toContain('DRAWER CONTENT')
     expect(panes[1]?.textContent).toContain('MAIN CONTENT')
   })
+
+  // A long unbreakable line gives the main content a large min-content width,
+  // reproducing the wide connector table that triggered these regressions.
+  const wideMain = createRawSnippet(() => ({
+    render: () => `<div style="white-space: nowrap">${'WIDE '.repeat(400)}</div>`
+  }))
+
+  // Regression test for https://github.com/feldera/feldera/issues/6675: content
+  // wider than the pane (e.g. the connector table) must not stretch the pane past
+  // its container. The panes use `overflow: visible` so popovers are not clipped,
+  // which re-enables the flex default `min-width: auto`; `min-w-0` counteracts it.
+  it('keeps the main pane within its container when the content is wider', async () => {
+    const { container } = render(InlineDrawer, {
+      open: false,
+      side: 'right',
+      main: wideMain,
+      children: textSnippet('DRAWER CONTENT')
+    })
+    container.style.width = '400px'
+
+    const pane = container.querySelector('[data-pane]') as HTMLElement
+    await expect.element(page.getByText('WIDE', { exact: false })).toBeInTheDocument()
+    expect(pane.getBoundingClientRect().width).toBeLessThanOrEqual(400)
+  })
+
+  // Regression test for the drawer being unresizable: with wide main content and
+  // no `min-w-0`, the main pane cannot shrink below its intrinsic width, so the
+  // drawer pane collapses to nothing and the resizer has no room to move. The
+  // drawer pane must keep the width the resizer allotted it (its `defaultSize`).
+  it('gives the drawer pane its allotted width even when the main content is wide', async () => {
+    const { container } = render(InlineDrawer, {
+      open: true,
+      side: 'right',
+      main: wideMain,
+      children: textSnippet('DRAWER CONTENT'),
+      defaultSize: '40%'
+    })
+    container.style.width = '1000px'
+
+    await expect.element(page.getByText('DRAWER CONTENT')).toBeInTheDocument()
+    const panes = [...container.querySelectorAll('[data-pane]')] as HTMLElement[]
+    const drawerPane = panes.find((p) => p.textContent?.includes('DRAWER CONTENT'))!
+    // 40% of 1000px, minus the resizer's margins; assert it kept most of its share.
+    expect(drawerPane.getBoundingClientRect().width).toBeGreaterThan(300)
+  })
 })
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte
index 5ab11db98bc..4b65a902114 100644
--- a/js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte
+++ b/js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte
@@ -218,16 +218,17 @@
     >
       {#snippet main()}
         <div
-          class="-mr-2 scrollbar flex min-w-0 flex-1 flex-col gap-4 overflow-x-clip overflow-y-auto pr-2"
+          class="-mr-2 scrollbar flex h-full min-w-0 flex-1 flex-col gap-4 overflow-x-clip overflow-y-auto pr-2"
         >
           <div class="flex w-full flex-col gap-4">
             {#if pipeline.current.status === 'Unavailable'}
               <WarningBanner class="rounded!">
                 Pipeline has been unavailable for {formatElapsedTime(
                   new Date(pipeline.current.deploymentStatusSince)
-                )} since {Dayjs(pipeline.current.deploymentStatusSince).format('MMM D, YYYY h:mm A')}.
-                Showing the last known metrics while reconnecting. You can attempt to suspend or shut it
-                down.
+                )} since {Dayjs(pipeline.current.deploymentStatusSince).format(
+                  'MMM D, YYYY h:mm A'
+                )}. Showing the last known metrics while reconnecting. You can attempt to suspend or
+                shut it down.
               </WarningBanner>
             {/if}
             <div class="flex flex-wrap gap-4">