From 9254b8dc2274e727ca95088fbd00eedd15360298 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 25 Aug 2026 12:32:38 +0700
Subject: [PATCH] =?UTF-8?q?fix(blocking):=20=D1=83=D0=B4=D0=B5=D1=80=D0=B6?=
 =?UTF-8?q?=D0=B0=D1=82=D1=8C=20=D0=B3=D0=BE=D1=80=D0=B8=D0=B7=D0=BE=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D1=81=D0=BA=D1=80?=
 =?UTF-8?q?=D0=BE=D0=BB=D0=BB=20=D0=BC=D0=B0=D1=82=D1=80=D0=B8=D1=86=D1=8B?=
 =?UTF-8?q?=20=D0=B2=D0=BD=D1=83=D1=82=D1=80=D0=B8=20=D1=81=D1=82=D1=80?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/components/layout/app-shell.tsx  |  4 ++--
 apps/web/src/components/page-shell.tsx        |  2 +-
 .../components/reui-kit/frame-data-grid.tsx   | 21 +++++++++++--------
 packages/ui/src/components/sidebar.tsx        |  2 +-
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/layout/app-shell.tsx b/apps/web/src/components/layout/app-shell.tsx
index 269b1ce..894544f 100644
--- a/apps/web/src/components/layout/app-shell.tsx
+++ b/apps/web/src/components/layout/app-shell.tsx
@@ -257,7 +257,7 @@ export function AppShell({ children }: { children: ReactNode }) {
               <SystemMonitorPopover />
             </div>
           </header>
-          <div className="flex flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">
+          <div className="flex min-w-0 flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">
             <SpaceScopedMain>{children}</SpaceScopedMain>
           </div>
         </SidebarInset>
@@ -272,7 +272,7 @@ export function AppShell({ children }: { children: ReactNode }) {
 function SpaceScopedMain({ children }: { children: ReactNode }) {
   const { spaceId } = useSpaceId()
   return (
-    <div key={spaceId ?? 'default'} className="flex flex-1 flex-col gap-4 md:gap-6">
+    <div key={spaceId ?? 'default'} className="flex min-w-0 flex-1 flex-col gap-4 md:gap-6">
       {children}
     </div>
   )
diff --git a/apps/web/src/components/page-shell.tsx b/apps/web/src/components/page-shell.tsx
index 92f1649..f29689b 100644
--- a/apps/web/src/components/page-shell.tsx
+++ b/apps/web/src/components/page-shell.tsx
@@ -2,5 +2,5 @@ import type { ReactNode } from 'react'
 import { cn } from '@cfdm/ui/lib/utils'
 
 export function PageShell({ children, className }: { children: ReactNode; className?: string }) {
-  return <div className={cn('flex flex-col gap-4 md:gap-6', className)}>{children}</div>
+  return <div className={cn('flex w-full min-w-0 flex-col gap-4 md:gap-6', className)}>{children}</div>
 }
diff --git a/apps/web/src/components/reui-kit/frame-data-grid.tsx b/apps/web/src/components/reui-kit/frame-data-grid.tsx
index 0545fc0..82986ec 100644
--- a/apps/web/src/components/reui-kit/frame-data-grid.tsx
+++ b/apps/web/src/components/reui-kit/frame-data-grid.tsx
@@ -291,14 +291,17 @@ function FrameDataGridBody<TData extends object>({
         header: 'text-xs font-medium text-muted-foreground',
       }}
     >
-      <DataGridContainer border={false}>
+      <DataGridContainer border={false} className={horizontalScroll ? 'min-w-0' : undefined}>
         {virtualization || horizontalScroll ? (
-          <DataGridScrollArea
-            orientation={scrollOrientation}
-            style={virtualization ? { height } : undefined}
-          >
-            {tableNode}
-          </DataGridScrollArea>
+          <div className="min-w-0 w-full">
+            <DataGridScrollArea
+              className="min-w-0 w-full"
+              orientation={scrollOrientation}
+              style={virtualization ? { height } : undefined}
+            >
+              {tableNode}
+            </DataGridScrollArea>
+          </div>
         ) : (
           tableNode
         )}
@@ -481,7 +484,7 @@ export function FrameDataGrid<TData extends object>({
 
   if (data.length === 0) {
     return (
-      <Frame dense variant="default" spacing="sm" className={cn('w-full', className)}>
+      <Frame dense variant="default" spacing="sm" className={cn('w-full min-w-0', className)}>
         {hasHeader ? (
           <DataGridSectionHeader title={title} description={description} actions={headerActions} />
         ) : null}
@@ -511,7 +514,7 @@ export function FrameDataGrid<TData extends object>({
   )
 
   return (
-    <Frame dense variant="default" spacing="sm" className={cn('w-full', className)}>
+    <Frame dense variant="default" spacing="sm" className={cn('w-full min-w-0', className)}>
       {hasHeader ? (
         <DataGridSectionHeader title={title} description={description} actions={headerActions} />
       ) : null}
diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx
index 0327bf0..ffd8a67 100644
--- a/packages/ui/src/components/sidebar.tsx
+++ b/packages/ui/src/components/sidebar.tsx
@@ -310,7 +310,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "relative flex min-w-0 w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
       {...props}