Skip to content

Social icons in onboarding layout overlap the register form on short viewports #4691

Description

@Phoenix1808

To Reproduce

On the sign-up page, the GitHub, X and Discord icons in the bottom-right corner
sit right on top of the Register button and the "Need help? Contact us"
link. You can see in the screenshot below that the GitHub and X icons are
overlapping the Register button, and the Discord icon is pushed against the
edge over the footer text.

Image

I had a look at the code and the icons are in the shared onboarding layout
(apps/dokploy/components/layouts/onboarding-layout.tsx). They're positioned
with absolute bottom-4 right-4, but since the closest positioned parent is the
page-level container, they end up pinned to the bottom-right of the whole screen
instead of staying out of the form's way.

The register form is pretty tall (name, last name, email, password, confirm
password + the Google/email options), so on a normal/short screen height the
form reaches all the way down to where the icons are and they collide. The login
page has fewer fields so it usually looks fine there, which is probably why this
went unnoticed.

Expected: the icons shouldn't overlap the form — they should sit below the
content or be spaced so they never clash, even when the form is long.

I'd like to work on this if that's okay.

Current vs. Expected behavior

Current Behavior

On the register/sign-up page, the social icons (GitHub, X, Discord) overlap the
Register button and the "Need help? Contact us" text at the bottom of the form.
The screenshot is already attached in description !

Expected behavior

The social icons should not overlap the form content. They should sit below the form
(in normal document flow) or be offset so they never collide on short viewports.

Affected page(s)
Register / sign-up (/register)
Any page using OnboardingLayout

Provide environment information

Operating System:
  OS: Windows 11
  Arch: x64
Dokploy version: v0.29.8
VPS Provider: N/A — this is a UI/CSS bug, reproduces in the browser regardless of host
What applications/services are you trying to deploy? N/A — happens on the sign-up page before any deployment
Browser: Chrome (latest)

Which area(s) are affected? (Select all that apply)

Installation, Cloud Version

Are you deploying the applications where Dokploy is installed or on a remote server?

Same server where Dokploy is installed

Additional context

No response

Will you send a PR to fix it?

Yes, did it

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions