fix table name overflow in side panel

src/components/empty-state/empty-state.tsx

@@ -15,7 +15,7 @@ export const EmptyState = forwardRef<
     <div
         ref={ref}
         className={cn(
-            'flex flex-col items-center justify-center space-y-1',
+            'flex flex-1 flex-col items-center justify-center space-y-1',
             className
         )}
     >

src/components/scroll-area/scroll-area.tsx

@@ -12,7 +12,7 @@ const ScrollArea = React.forwardRef<
         className={cn('relative overflow-hidden', className)}
         {...props}
     >
-        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] scrollable-flex">
             {children}
         </ScrollAreaPrimitive.Viewport>
         <ScrollBar />

src/index.css

@@ -11,4 +11,8 @@
         @apply transition-[width];
         @apply duration-100;
     }
+
+    .scrollable-flex > div {
+        @apply !flex;
+    }
 }

src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx

@@ -143,8 +143,8 @@ export const RelationshipListItemHeader: React.FC<
     );
 
     return (
-        <div className="h-11 flex items-center justify-between flex-1 group">
-            <div className="flex flex-1">
+        <div className="h-11 flex items-center justify-between flex-1 group overflow-hidden">
+            <div className="flex flex-1 min-w-0">
                 {editMode ? (
                     <Input
                         ref={inputRef}
@@ -157,7 +157,7 @@ export const RelationshipListItemHeader: React.FC<
                         className="h-7 focus-visible:ring-0 w-full"
                     />
                 ) : (
-                    relationship.name
+                    <div className="truncate">{relationship.name}</div>
                 )}
             </div>
             <div className="flex flex-row-reverse">

src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item.tsx

@@ -20,7 +20,7 @@ export const RelationshipListItem = React.forwardRef<
         <AccordionItem value={relationship.id} className="rounded-md" ref={ref}>
             <AccordionTrigger
                 asChild
-                className="hover:no-underline hover:bg-accent rounded-md px-2 py-0 data-[state=open]:rounded-b-none"
+                className="hover:no-underline hover:bg-accent rounded-md px-2 py-0 data-[state=open]:rounded-b-none w-full"
             >
                 <RelationshipListItemHeader relationship={relationship} />
             </AccordionTrigger>

src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-header/table-list-item-header.tsx

@@ -148,8 +148,8 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
     );
 
     return (
-        <div className="h-11 flex items-center justify-between flex-1 gap-1 group">
-            <div className="flex flex-1">
+        <div className="h-11 flex items-center justify-between flex-1 gap-1 group overflow-hidden">
+            <div className="flex flex-1 min-w-0">
                 {editMode ? (
                     <Input
                         ref={inputRef}
@@ -162,7 +162,7 @@ export const TableListItemHeader: React.FC<TableListItemHeaderProps> = ({
                         className="h-7 focus-visible:ring-0 w-full"
                     />
                 ) : (
-                    table.name
+                    <div className="truncate">{table.name}</div>
                 )}
             </div>
             <div className="flex flex-row-reverse">

src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item.tsx

@@ -19,7 +19,7 @@ export const TableListItem = React.forwardRef<
     return (
         <AccordionItem value={table.id} className="rounded-md" ref={ref}>
             <AccordionTrigger
-                className="hover:no-underline hover:bg-accent rounded-md px-2 border-l-[6px] py-0 data-[state=open]:rounded-b-none"
+                className="hover:no-underline hover:bg-accent rounded-md px-2 border-l-[6px] py-0 data-[state=open]:rounded-b-none w-full"
                 style={{
                     borderColor: table.color,
                 }}