To Reproduce
- Go to
/dashboard/settings/servers.
- Add a server (or edit an existing one) with a long name, for example
production-eu-west-1-primary-database-node.
- Look at the server card in the list.
Current vs. Expected behavior
When a server name is long, the title (h3) does not wrap. Instead it overflows its container and overlaps the surrounding content, and the three-dots actions menu on the right side of the card header gets squeezed until it disappears.
Expected: the name should wrap onto multiple lines and the three-dots actions menu should stay visible and clickable regardless of the name length.
Provide environment information
Affected area: Web dashboard UI (server settings list)
Branch: canary
Component: apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
This is a CSS layout issue in the dashboard, so it reproduces independently of the OS, VPS provider, or deployed application.
Root cause
In show-servers.tsx, the card header is a flex row with justify-between:
<div className="flex items-start justify-between">
<div className="flex items-center gap-2">
<ServerIcon className="size-5 text-muted-foreground" />
<CardTitle className="text-lg">{server.name}</CardTitle>
</div>
{/* three-dots DropdownMenu */}
</div>
Two things combine to cause it:
- The title container has no
min-w-0, so flexbox keeps it at its content width (flex items default to min-width: auto), and the h3 has no break-words, so a long name overflows instead of wrapping.
- The dropdown trigger has no
shrink-0, so the overflowing title squeezes it down to zero width and the three dots vanish.
Suggested fix
Let the title block shrink and wrap, and keep the icon and the actions button from being crushed:
- Add
min-w-0 to the title container and break-words min-w-0 to the CardTitle.
- Add
shrink-0 to the ServerIcon and to the dropdown trigger button.
- Add
gap-2 to the header row so the title and the actions button always keep some space between them.
Will you send a PR to fix it?
Yes.
To Reproduce
/dashboard/settings/servers.production-eu-west-1-primary-database-node.Current vs. Expected behavior
When a server name is long, the title (
h3) does not wrap. Instead it overflows its container and overlaps the surrounding content, and the three-dots actions menu on the right side of the card header gets squeezed until it disappears.Expected: the name should wrap onto multiple lines and the three-dots actions menu should stay visible and clickable regardless of the name length.
Provide environment information
This is a CSS layout issue in the dashboard, so it reproduces independently of the OS, VPS provider, or deployed application.
Root cause
In
show-servers.tsx, the card header is a flex row withjustify-between:Two things combine to cause it:
min-w-0, so flexbox keeps it at its content width (flex items default tomin-width: auto), and theh3has nobreak-words, so a long name overflows instead of wrapping.shrink-0, so the overflowing title squeezes it down to zero width and the three dots vanish.Suggested fix
Let the title block shrink and wrap, and keep the icon and the actions button from being crushed:
min-w-0to the title container andbreak-words min-w-0to theCardTitle.shrink-0to theServerIconand to the dropdown trigger button.gap-2to the header row so the title and the actions button always keep some space between them.Will you send a PR to fix it?
Yes.