Fix SplitLayout responsive layout overflow (767px-1450px)

Flex items were overflowing due to content min-width constraints in mid-range breakpoints

 - Add minW={0} to VStack in SplitLayout for proper flex shrinking
- Add overflowX="auto" to DataTable as fallback for extreme cases

fix #162

Author: kubrickcode

src/frontend/src/core/layout/split-layout.tsx

@@ -11,10 +11,10 @@ type SplitLayoutProps = {
 export const SplitLayout = ({ firstGroup, secondGroup }: SplitLayoutProps) => {
   return (
     <Flex direction={{ base: "column", md: "row" }} gap={4}>
-      <VStack flex="1" gap={4}>
+      <VStack flex="1" gap={4} minW={0}>
         <ErrorBoundary>{firstGroup}</ErrorBoundary>
       </VStack>
-      <VStack flex="1" gap={4}>
+      <VStack flex="1" gap={4} minW={0}>
         <ErrorBoundary>{secondGroup}</ErrorBoundary>
       </VStack>
     </Flex>

src/frontend/src/core/table/data-table.tsx

@@ -195,6 +195,7 @@ export const DataTable = <T,>({
         borderRadius="xl"
         boxShadow="lg"
         overflow="hidden"
+        overflowX="auto"
         width="100%"
       >
         <Table.ScrollArea maxHeight="4xl">