Skip to content

Copy button overlaps bot slug text on Share page when domain + slug are long (self-hosted) #2561

Description

@agasalhem

Describe the bug
On the "Share" tab of a typebot, the "Your typebot links" card shows the public URL as {viewer domain}/{slug}. When the viewer domain (common in self-hosted setups, e.g. auto-generated Easypanel/Docker domains) plus the bot slug together are long, the "Copy" button visually overlaps the slug text button instead of the text truncating/wrapping. Fragments of the slug text leak out from behind the "Copy" button on both sides, making the link hard to read. This appears to be purely cosmetic (the copy button still copies the correct full URL), but it makes the UI look broken.

This got noticeably worse after the "Site preview metadata" card was added next to the links card on the Share page, since it halves the available width for the links card.

To Reproduce
Steps to reproduce the behavior:

  1. Self-host Typebot with a long viewer domain, e.g. https://example-viewer-app.12345.hostpanel.io/
  2. Publish a bot with a reasonably long slug, e.g. my-long-bot-slug-name12
  3. Go to the bot's Share page
  4. Look at the "Your typebot links" card next to "Site preview metadata"
  5. See the "Copy" button overlapping/covering part of the slug text, with slug fragments visible behind/around the button

Expected behavior
The link text should truncate with ellipsis (or wrap) and never overlap with the "Copy" button, regardless of domain/slug length.

Environment

  • Typebot version: 3.17.2 (self-hosted via Easypanel/Docker)
  • Affected page: Share tab, "Your typebot links" card

Screenshot
Attached below (domain, slug and bot name replaced with placeholder values of similar length to reproduce the same overflow without exposing real data).

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions