gsadmin/stackrender
1
0
Fork 0
mirror of https://github.com/stackrender/stackrender.git synced 2026-10-26 14:02:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Truncate long table,field,relationship names

Browse Source
This commit is contained in:
KarimTamani
2026-10-04 17:31:26 +01:00
parent bb9fb01a17
commit 6eca627161
9 changed files with 43 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/multi-select.tsx
+10 -9
View File
@@ -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
src/features/database/components/db-controller/relationship-controller/index.tsx
+3 -2
View File
@@ -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>
}
{
src/features/database/components/db-controller/relationship-controller/relationship-accordion-item/relationship-accordion-trigger.tsx
+3 -3
View File
@@ -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
})}
>
src/features/database/components/db-controller/tables-controller/index.tsx
+3 -2
View File
@@ -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 &&
src/features/database/components/db-controller/tables-controller/table-accordion-item/field/field-item.tsx
+2 -3
View File
@@ -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")}
src/features/database/components/db-controller/tables-controller/table-accordion-item/index/index-item.tsx
+1 -1
View File
@@ -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
src/features/database/components/db-controller/tables-controller/table-accordion-item/table-accordion-trigger.tsx
+3 -9
View File
@@ -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)}
src/features/database/components/field.tsx
+16 -13
View File
@@ -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>
src/features/database/modals/open-database-modal.tsx
+2 -2
View File
@@ -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>