Skip to content

feat(ui): enhance deployments layout and fix visual jumping - #5429

Open
imrja8 wants to merge 3 commits into
Dokploy:canaryfrom
imrja8:fix/deployments-filter-bar-inline-layout
Open

imrja8 wants to merge 3 commits into
Dokploy:canaryfrom
imrja8:fix/deployments-filter-bar-inline-layout

Conversation

@imrja8

@imrja8 imrja8 commented Sep 12, 2026

Copy link
Copy Markdown
Contributor

What is this PR about?

This PR brings a much-needed visual polish to the Deployments Overview tab, making the layout cleaner, more responsive, and eliminating layout shifts. It also includes several code cleanliness improvements under the hood.

UI / UX Enhancements

  • Inline Filter Bar (md+ screens): Moved the search bar and filter selects to sit perfectly side-by-side with the Tabs (Deployments | Queue) on tablets and desktops. This utilizes the horizontal real estate better and feels much more native.
  • Fixed "Jumping" Table: Standardized the vertical padding (pt-4) above the content tables on both the Deployments and Queue subtabs. Previously, switching between these tabs caused the table to physically jump up and down by 8px. It is now completely stable.

Code Refactoring

  • Removed Code Duplication: Extracted the search/filter controls to live entirely within a single responsive flex container (flex flex-col md:flex-row), eliminating the need to duplicate complex DOM nodes for mobile/desktop.
  • Cleaned up React Table state: Removed entirely unused filter states (columnFilters, globalFilter) and their corresponding imports from show-deployments-table.tsx since filtering is already manually handled via useMemo.
  • Removed Unnecessary Wrappers: Stripped out a redundant <div className="space-y-2"> from the Deployments table that was contributing to margin-collapse issues.

Checklist

Before submitting this PR, please make sure that:

  • You created a dedicated branch based on the canary branch.
  • You have read the suggestions in the CONTRIBUTING.md file https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#pull-request
  • You have tested this PR in your local instance. If you have not tested it yet, please do so before submitting. This helps avoid wasting maintainers' time reviewing code that has not been verified by you.

Issues related (if applicable)

N/A

Screenshots (if applicable)

  • Before Filters were stacked on multiple lines wasting vertical space, and switching tabs caused the table to physically jump up/down due to inconsistent padding.
before
  • After Filters sit perfectly inline with the tabs on md+ screens, and switching tabs is completely smooth with rock-solid padding.
after

RetriggerConfidence Score: 5/5

The PR appears safe to merge; the previously reported tablet overflow is fully fixed and no new actionable issues were identified.

Summary

  • Moves deployment filter state and controls into the overview component.
  • Passes filter values into the deployments table while removing unused React Table filtering state.
  • Aligns deployment and queue content padding to prevent layout shifts.
  • Uses the lg breakpoint for the single-row layout, resolving the tablet-width overflow reported previously.

Reviews (2) · Last reviewed commit: "fix(ui): change filter layout breakpoint..."

@imrja8
imrja8 requested a review from Siumauricio as a code owner September 12, 2026 10:25
Comment thread apps/dokploy/components/dashboard/overview/show-overview-deployments.tsx Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant