fix(blocking): удержать горизонтальный скролл матрицы внутри страницы

Co-authored-by: Cursor <[email protected]>

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>
   )

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>
 }

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
+          <div className="min-w-0 w-full">
-            orientation={scrollOrientation}
+            <DataGridScrollArea
-            style={virtualization ? { height } : undefined}
+              className="min-w-0 w-full"
-          >
+              orientation={scrollOrientation}
-            {tableNode}
+              style={virtualization ? { height } : undefined}
-          </DataGridScrollArea>
+            >
+              {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}

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}