From 6eca62716165cd943dc4a2a23c38323a03b25778 Mon Sep 17 00:00:00 2001
From: KarimTamani <tamanikarim50@gmail.com>
Date: Sun, 4 Oct 2026 17:31:26 +0100
Subject: [PATCH] Truncate long table,field,relationship names

---
 src/components/multi-select.tsx               | 19 ++++++------
 .../relationship-controller/index.tsx         |  5 ++--
 .../relationship-accordion-trigger.tsx        |  6 ++--
 .../db-controller/tables-controller/index.tsx |  5 ++--
 .../table-accordion-item/field/field-item.tsx |  5 ++--
 .../table-accordion-item/index/index-item.tsx |  2 +-
 .../table-accordion-trigger.tsx               | 12 ++------
 src/features/database/components/field.tsx    | 29 ++++++++++---------
 .../database/modals/open-database-modal.tsx   |  4 +--
 9 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/src/components/multi-select.tsx b/src/components/multi-select.tsx
index 45b0e40..cf3b873 100644
--- a/src/components/multi-select.tsx
+++ b/src/components/multi-select.tsx
@@ -813,7 +813,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 								getAllOptions().length
 							} options selected. ${placeholder}`}
 							className={cn(
-								"flex p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto",
+								"flex p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto ",
 								autoSize ? "w-auto" : "w-full",
 								responsiveSettings.compactMode && "min-h-8 text-sm",
 								screenSize === "mobile" && "min-h-12 text-base",
@@ -825,7 +825,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 								maxWidth: `min(${widthConstraints.maxWidth}, 100%)`,
 							}}>
 							{selectedValues.length > 0 ? (
-								<div className="flex justify-between items-center w-full">
+								<div className="flex justify-between items-center w-full  min-w-0   ">
 									<div
 										className={cn(
 											"flex items-center gap-1",
@@ -867,13 +867,13 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 															getBadgeAnimationClass(),
 															multiSelectVariants({ variant }),
 															customStyle?.gradient &&
-																"text-white border-transparent",
+																"text-white border-transparent ",
 															responsiveSettings.compactMode &&
-																"text-xs px-1.5 py-0.5",
+																"text-xs px-1.5 py-0.5 ",
 															screenSize === "mobile" &&
-																"max-w-[120px] truncate",
-															singleLine && "flex-shrink-0 whitespace-nowrap",
-															"[&>svg]:pointer-events-auto"
+																"!max-w-[120px] truncate ",
+															singleLine && "flex-shrink-0 whitespace-nowrap ",
+															"[&>svg]:pointer-events-auto  " 
 														)}
 														style={{
 															...badgeStyle,
@@ -897,8 +897,9 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 														)}
 														<span
 															className={cn(
-																screenSize === "mobile" && "truncate"
-															)}>
+																screenSize === "mobile" && "truncate" , 
+																"max-w-[120px] truncate" 
+															) }>
 															{option.label}
 														</span>
 														<div
diff --git a/src/features/database/components/db-controller/relationship-controller/index.tsx b/src/features/database/components/db-controller/relationship-controller/index.tsx
index 92ee1ab..c653484 100644
--- a/src/features/database/components/db-controller/relationship-controller/index.tsx
+++ b/src/features/database/components/db-controller/relationship-controller/index.tsx
@@ -112,7 +112,8 @@ const RelationshipController: React.FC = ({ }) => {
 
             {
                 allRelationships.length > 0 &&
-                <ScrollArea className="flex-1 px-3  overflow-hidden">
+                
+                <div className="px-3 !h-full  w-full !overflow-y-scroll ">
                     <Accordion
                         type="single"
                         collapsible
@@ -127,7 +128,7 @@ const RelationshipController: React.FC = ({ }) => {
                             </>
                         ))}
                     </Accordion>
-                </ScrollArea>
+                </div>
             }
 
             {
diff --git a/src/features/database/components/db-controller/relationship-controller/relationship-accordion-item/relationship-accordion-trigger.tsx b/src/features/database/components/db-controller/relationship-controller/relationship-accordion-item/relationship-accordion-trigger.tsx
index cd63f92..13b9049 100644
--- a/src/features/database/components/db-controller/relationship-controller/relationship-accordion-item/relationship-accordion-trigger.tsx
+++ b/src/features/database/components/db-controller/relationship-controller/relationship-accordion-item/relationship-accordion-trigger.tsx
@@ -66,13 +66,13 @@ const RelationshipAccordionTrigger: React.FC<RelationshipAccordionTriggerProps>
     }, [relationship.name]);
 
     return (
-        <AccordionTrigger className="group h-12 py-3">
+        <AccordionTrigger className="group h-12 py-3 min-w-0">
             {
                 !editMode &&
                 <>
-                    <div className="w-full flex">
+                    <div className="w-full flex min-w-0">
                         <label
-                            className={cn("py-2 truncate  text-sm cursor-pointer max-w-50 ", {
+                            className={cn("py-2 truncate  text-sm cursor-pointer  ", {
                                 "text-destructive": identifierError != null
                             })}
                         >
diff --git a/src/features/database/components/db-controller/tables-controller/index.tsx b/src/features/database/components/db-controller/tables-controller/index.tsx
index cd6268e..5c7d000 100644
--- a/src/features/database/components/db-controller/tables-controller/index.tsx
+++ b/src/features/database/components/db-controller/tables-controller/index.tsx
@@ -172,7 +172,8 @@ const TablesController: React.FC = ({ }) => {
             </div>
             {
                 allTables.length > 0 && !showSqlPreview &&
-                <ScrollArea className="px-3 h-full  w-full overflow-hidden">
+
+                <div className="px-3 !h-full  w-full !overflow-y-scroll ">
                     <Accordion
                         type="single"
                         collapsible
@@ -202,7 +203,7 @@ const TablesController: React.FC = ({ }) => {
 
                         </DndContext>
                     </Accordion>
-                </ScrollArea>
+                </div>
             }
             {
                 allTables.length > 0 && showSqlPreview &&
diff --git a/src/features/database/components/db-controller/tables-controller/table-accordion-item/field/field-item.tsx b/src/features/database/components/db-controller/tables-controller/table-accordion-item/field/field-item.tsx
index 2fab3a1..b99b68f 100644
--- a/src/features/database/components/db-controller/tables-controller/table-accordion-item/field/field-item.tsx
+++ b/src/features/database/components/db-controller/tables-controller/table-accordion-item/field/field-item.tsx
@@ -103,13 +103,12 @@ const FieldItem: React.FC<Props> = ({ field, dialect }) => {
     }
 
     return (
-        <div className="flex w-full gap-1 items-center  " style={style} ref={setNodeRef} {...attributes}>
+        <div className="flex w-full gap-1 items-center" style={style} ref={setNodeRef} {...attributes}>
             <div {...listeners}>
                 <IconGripVertical className="size-4 text-muted-foreground hover:text-foreground cursor-move shrink-0" />
             </div>
             <div className="flex gap-2 w-full">
-                <div className="flex flex-1  relative items-center min-w-0  ">
-
+                <div className="flex flex-1  relative items-center min-w-0">
                     <Input
                         aria-label={t("db_controller.name")}
                         placeholder={t("db_controller.name")}
diff --git a/src/features/database/components/db-controller/tables-controller/table-accordion-item/index/index-item.tsx b/src/features/database/components/db-controller/tables-controller/table-accordion-item/index/index-item.tsx
index ae4329f..a61e40c 100644
--- a/src/features/database/components/db-controller/tables-controller/table-accordion-item/index/index-item.tsx
+++ b/src/features/database/components/db-controller/tables-controller/table-accordion-item/index/index-item.tsx
@@ -97,7 +97,7 @@ const IndexItem: React.FC<Props> = ({ index, fields, dialect }) => {
     return (
         <div className="flex gap-2 w-full items-center justify-stretch">
 
-            <div className="flex w-full flex-1 ">
+            <div className="flex w-full flex-1 min-w-0">
                 <MultiSelect
                     options={
                         fields.map((field: FieldType) => ({ value: field.id, label: field.name })) as any
diff --git a/src/features/database/components/db-controller/tables-controller/table-accordion-item/table-accordion-trigger.tsx b/src/features/database/components/db-controller/tables-controller/table-accordion-item/table-accordion-trigger.tsx
index 0762cca..a191657 100644
--- a/src/features/database/components/db-controller/tables-controller/table-accordion-item/table-accordion-trigger.tsx
+++ b/src/features/database/components/db-controller/tables-controller/table-accordion-item/table-accordion-trigger.tsx
@@ -108,13 +108,8 @@ const TableAccordionHeader: React.FC<TableAccordionHeaderProps> = ({ table, isOp
 
 
     const { listeners } = useSortable({ id: table.id });
-
-
-
-
     return (
-
-        <AccordionTrigger className="group h-12 py-3 "
+        <AccordionTrigger className="group h-12 py-3  min-w-0"
             leftContent={
                 <div className="h-full bg-secondary  w-1 rounded-lg shrink-0 bg-primary" style={{
                     backgroundColor: table.color as string
@@ -122,18 +117,17 @@ const TableAccordionHeader: React.FC<TableAccordionHeaderProps> = ({ table, isOp
                 </div>
             }
         >
-
             <div {...listeners}>
                 <IconGripVertical className="size-4 text-muted-foreground hover:text-foreground cursor-move shrink-0" />
             </div>
             {
                 !editMode &&
                 <>
-                    <div className="w-full flex items-center ">
+                    <div className="w-full flex items-center min-w-0">
                         <Tooltip>
                             <TooltipTrigger asChild>
                                 <label
-                                    className={cn("py-2 truncate  text-sm cursor-pointer max-w-50 ", {
+                                    className={cn("truncate  text-sm cursor-pointer", {
                                         "text-destructive": identifierError != null
                                     })}
                                     onDoubleClick={() => setEditMode(true)}
diff --git a/src/features/database/components/field.tsx b/src/features/database/components/field.tsx
index e3b6d91..956adc4 100644
--- a/src/features/database/components/field.tsx
+++ b/src/features/database/components/field.tsx
@@ -65,38 +65,41 @@ const Field: React.FC<Props> = (props) => {
             highlight ? "bg-secondary" : "",
             className
         )}>
-            <div className="text-muted-foreground flex items-center truncate w-full   gap-1.5 min-w-0  ">
+            <div className="text-muted-foreground flex items-center  w-full   gap-1.5 min-w-0  ">
                 {
                     field.isPrimary &&
-                    <IconKey className="size-3" />
+                    <IconKey className="size-3 shrink-0" />
                 }
                 {
                     field.nullable && !field.isPrimary &&
-                    <IconKeyframe className="size-3 stroke-3" />
+                    <IconKeyframe className="size-3 stroke-3 shrink-0" />
                 }
                 {
                     !field.nullable && !field.isPrimary &&
-                    <IconKeyframe className="size-3 fill-muted-foreground" />
+                    <IconKeyframe className="size-3 fill-muted-foreground shrink-0" />
                 }
                 {
                     !editMode ?
-                        <label
-                            className={"truncate flex gap-1 text-xs text-foreground font-medium "}
-                            onDoubleClick={() => setEditMode(true)}
-                        >
-                            {fieldName}
+                        <div className="flex w-full min-w-0 w-full items-center gap-2  ">
+                            <label
+                            className={"truncate  text-xs text-foreground font-medium min-w-0"}
+                                onDoubleClick={() => setEditMode(true)}
+                            >
+                                {fieldName}
+
+                            </label>
                             {
                                 field.note &&
                                 <Tooltip>
                                     <TooltipTrigger asChild>
-                                        <IconMessageCircle className="size-3 text-muted-foreground  " />
+                                        <IconMessageCircle className="size-3 text-muted-foreground shrink-0 " />
                                     </TooltipTrigger>
                                     <TooltipContent>
                                         {field.note}
                                     </TooltipContent>
                                 </Tooltip>
                             }
-                        </label>
+                        </div>
                         :
                         <Input
                             onBlur={saveFieldName}
@@ -121,11 +124,11 @@ const Field: React.FC<Props> = (props) => {
             {
                 !editMode ?
                     <div className="text-xs text-muted-foreground flex   shrink-0 ">
-                        <div className={cn(" !text-muted-foreground font-medium group-hover:opacity-0")}>
+                        <div className={cn(" !text-muted-foreground font-medium group-hover:hidden")}>
                             {field.type?.name?.split(' ')[0]}
                         </div>
 
-                        <div className="flex gap-1 opacity-0 shrink-0 flex-row group-hover:opacity-100 transition-opacity duration-200 absolute right-1 top-1 ">
+                        <div className="flex gap-1 hidden shrink-0 flex-row group-hover:flex transition-opacity duration-200  ">
                             <Button variant="outline" size="icon" className="size-6 shrink-0 shadow-sm rounded-sm" onClick={() => setEditMode(true)}>
                                 <IconPencil className="size-3 text-muted-foreground " />
                             </Button>
diff --git a/src/features/database/modals/open-database-modal.tsx b/src/features/database/modals/open-database-modal.tsx
index 84656eb..83019b4 100644
--- a/src/features/database/modals/open-database-modal.tsx
+++ b/src/features/database/modals/open-database-modal.tsx
@@ -63,13 +63,13 @@ const OpenDatabaseModal: React.FC<ModalProps> = (props) => {
                                     data-state={selectedDatabase == database.id ? "selected" : undefined}
                                     onClick={() => setSelectedDatabase(database.id)}
                                     >
-                                    <TableCell className="flex  justify-center ">
+                                    <TableCell className="flex justify-center  ">
                                         <img
                                             src={getDatabaseByDialect(database.dialect).small_logo}
                                             width={24}
                                         />
                                     </TableCell>
-                                    <TableCell className="font-medium ">{database.name}</TableCell>
+                                    <TableCell className="font-medium max-w-[86px] truncate">{database.name}</TableCell>
                                     <TableCell className="text-muted-foreground">{
                                         new Date(database.createdAt as string).toLocaleString("en-US")
                                     }</TableCell>