Merge pull request #5661 from manozzo/fix/template-card-tags-overflow

fix(templates): cap visible tags so the Create button stays visible

(cherry picked from commit d9fe046396)

[skip ci]

apps/dokploy/components/dashboard/project/add-template.tsx

@@ -435,7 +435,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 												{viewMode === "detailed" &&
 													template?.tags?.length > 0 && (
 														<div className="flex flex-wrap justify-center gap-1.5">
-															{template?.tags?.map((tag) => (
+															{template.tags.slice(0, 6).map((tag) => (
 																<Badge
 																	key={tag}
 																	variant="green"
@@ -444,6 +444,15 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 																	{tag}
 																</Badge>
 															))}
+															{template.tags.length > 6 && (
+																<Badge
+																	variant="green"
+																	className="text-[10px] px-2 py-0"
+																	title={template.tags.slice(6).join(", ")}
+																>
+																	+{template.tags.length - 6}
+																</Badge>
+															)}
 														</div>
 													)}
 											</div>

apps/dokploy/components/layouts/dashboard-layout.tsx

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import { api } from "@/utils/api";
 import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
 import { ImpersonationBar } from "../dashboard/impersonation/impersonation-bar";
-import { HubSpotWidget } from "../shared/HubSpotWidget";
+import { useHubSpotChat } from "../shared/analytics";
 import Page from "./side";
 
 interface Props {
@@ -26,6 +26,7 @@ export const DashboardLayout = ({ children, metaName }: Props) => {
 	});
 
 	const isChatEnabled = isCloud === true && currentPlan === "startup";
+	useHubSpotChat(isChatEnabled);
 
 	const { data: onboardingStatus } = api.project.onboardingStatus.useQuery();
 	const shouldRedirectToOnboarding =
@@ -52,12 +53,6 @@ export const DashboardLayout = ({ children, metaName }: Props) => {
 				</Head>
 			)}
 			<Page>{children}</Page>
-			{isChatEnabled && (
-				<>
-					<HubSpotWidget />
-				</>
-			)}
-
 			{haveRootAccess === true && <ImpersonationBar />}
 		</>
 	);

apps/dokploy/components/shared/HubSpotWidget.tsx

@@ -1,14 +0,0 @@
-import Script from "next/script";
-
-export const HubSpotWidget = () => {
-	return (
-		<Script
-			id="hs-script-loader"
-			type="text/javascript"
-			src="//js-eu1.hs-scripts.com/147033433.js"
-			strategy="lazyOnload"
-			async
-			defer
-		/>
-	);
-};

apps/dokploy/components/shared/analytics.tsx

@@ -92,5 +92,11 @@ export const useHubSpotChat = (enabled: boolean) => {
 				loadWidget,
 			];
 		}
+		return () => {
+			window.hsConversationsOnReady = window.hsConversationsOnReady?.filter(
+				(callback) => callback !== loadWidget,
+			);
+			window.HubSpotConversations?.widget.remove();
+		};
 	}, [enabled]);
 };

apps/dokploy/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dokploy",
-	"version": "v0.30.7",
+	"version": "v0.30.8",
 	"private": true,
 	"license": "Apache-2.0",
 	"type": "module",