feat: enhance tab components for service detail pages

[kirill-dev-pro]

What is this PR about?

It makes tabs wrap, so users wont need to constantly scroll tab container on narrow screens

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.

Screenshots (if applicable)

Greptile Summary

This PR adds two exported Tailwind class-name constants (serviceDetailTabsBarClassName and serviceDetailTabsListClassName) to the tabs.tsx UI component and applies them uniformly across all 8 service detail pages (application, compose, and all DB types) to make the tab bar responsive — tabs now wrap to multiple lines on narrow viewports instead of overflowing horizontally.

Confidence Score: 5/5

Safe to merge — changes are purely cosmetic layout improvements with no logic or data-flow impact.

All findings are P2 (redundant CSS class, architectural suggestion about where to place constants). No functional or data-integrity issues were found. The Tailwind class merging via twMerge is handled correctly in cn().

apps/dokploy/components/ui/tabs.tsx — minor redundant class and coupling concern, both non-blocking.

_{Reviews (1): Last reviewed commit: "feat: enhance tab components for service..." | Re-trigger Greptile}

Greptile also left 2 inline comments on this PR.

[greptile-apps]

Redundant responsive class

max-md:gap-y-2 is the same value as the already-applied gap-y-2 (the base class covers all breakpoints in Tailwind's mobile-first system), so the responsive modifier does nothing. Only max-md:gap-x-4 is meaningful here.

Suggested change

	export const serviceDetailTabsListClassName =
	"flex flex-wrap h-auto min-h-10 gap-x-8 gap-y-2 max-md:gap-x-4 max-md:gap-y-2 justify-start";
	"flex flex-wrap h-auto min-h-10 gap-x-8 gap-y-2 max-md:gap-x-4 justify-start";

[greptile-apps]

Page-specific constants in a generic component

serviceDetailTabsBarClassName and serviceDetailTabsListClassName are semantically tied to service detail pages, not to the tabs component itself. Exporting layout presets from tabs.tsx couples the generic UI primitive to a specific page pattern. Consider moving them to a shared styles/constants file (e.g. lib/service-detail-styles.ts) or defining them inline in each page — the JSDoc comments already acknowledge they target a specific set of pages.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!