Skip to content

Long server name overlaps content and hides the actions menu on settings/servers #4433

@pparage

Description

@pparage

To Reproduce

  1. Go to /dashboard/settings/servers.
  2. Add a server (or edit an existing one) with a long name, for example production-eu-west-1-primary-database-node.
  3. 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:

  1. 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.
  2. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions