From ff50de54791138a5f8a3188b991b7025a71fc324 Mon Sep 17 00:00:00 2001
From: Laurence <laurence.jones@live.co.uk>
Date: Fri, 16 Jan 2026 12:10:35 +0000
Subject: [PATCH 1/2] feat: redesign remediation support badges

- Update to pill shape with improved color contrast
- Add dark mode support with appropriate color variants
- Add subtle shadow with hover effect
- Make responsive for mobile screens (smaller text/padding)
- Improve spacing between badges

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/remediation-support-badge.tsx  | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/crowdsec-docs/src/components/remediation-support-badge.tsx b/crowdsec-docs/src/components/remediation-support-badge.tsx
index 434041fb..277076fb 100644
--- a/crowdsec-docs/src/components/remediation-support-badge.tsx
+++ b/crowdsec-docs/src/components/remediation-support-badge.tsx
@@ -11,15 +11,22 @@ type RemediationSupportBadgesProps = {
 };
 
 const RemediationSupportBadge = ({ title, description, support }: { title: string; description: string; support: string }) => {
-	//ugly, for test
-	const colorClass = support === "Unsupported" ? "bg-red-400" : "bg-green-400";
+	const isSupported = support !== "Unsupported";
+	const statusClasses = isSupported
+		? "bg-emerald-700 dark:bg-emerald-600 text-white"
+		: "bg-red-700 dark:bg-red-500 text-white";
+
 	return (
 		<TooltipProvider>
 			<Tooltip>
 				<TooltipTrigger asChild>
-					<div className="border rounded-full flex text-black">
-						<span className="bg-slate-400 px-2 rounded-l-lg">{title}</span>
-						<span className={clsx("rounded-r-lg px-2", colorClass)}>{support}</span>
+					<div className="rounded-full flex text-xs sm:text-sm font-medium shadow-sm hover:shadow-md transition-shadow cursor-help overflow-hidden">
+						<span className="bg-slate-700 dark:bg-slate-600 text-white px-2.5 sm:px-4 py-1 sm:py-1.5">
+							{title}
+						</span>
+						<span className={clsx("px-2.5 sm:px-4 py-1 sm:py-1.5", statusClasses)}>
+							{support}
+						</span>
 					</div>
 				</TooltipTrigger>
 				<TooltipContent>
@@ -45,7 +52,7 @@ export default function RemediationSupportBadges({
 	const appsecSupport = Appsec !== undefined && Appsec ? "Supported" : "Unsupported";
 
 	return (
-		<div className="flex justify-center flex-wrap mb-4 gap-2">
+		<div className="flex justify-center flex-wrap mb-4 gap-2 sm:gap-3">
 			{Appsec !== undefined && (
 				<RemediationSupportBadge
 					title="AppSec"

From cde9df1daac63633757d59b2458e5862e7bd2567 Mon Sep 17 00:00:00 2001
From: Laurence <laurence.jones@live.co.uk>
Date: Fri, 16 Jan 2026 12:13:40 +0000
Subject: [PATCH 2/2] style: fix linter formatting issues

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/remediation-support-badge.tsx     | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/crowdsec-docs/src/components/remediation-support-badge.tsx b/crowdsec-docs/src/components/remediation-support-badge.tsx
index 277076fb..e3f12261 100644
--- a/crowdsec-docs/src/components/remediation-support-badge.tsx
+++ b/crowdsec-docs/src/components/remediation-support-badge.tsx
@@ -12,21 +12,15 @@ type RemediationSupportBadgesProps = {
 
 const RemediationSupportBadge = ({ title, description, support }: { title: string; description: string; support: string }) => {
 	const isSupported = support !== "Unsupported";
-	const statusClasses = isSupported
-		? "bg-emerald-700 dark:bg-emerald-600 text-white"
-		: "bg-red-700 dark:bg-red-500 text-white";
+	const statusClasses = isSupported ? "bg-emerald-700 dark:bg-emerald-600 text-white" : "bg-red-700 dark:bg-red-500 text-white";
 
 	return (
 		<TooltipProvider>
 			<Tooltip>
 				<TooltipTrigger asChild>
 					<div className="rounded-full flex text-xs sm:text-sm font-medium shadow-sm hover:shadow-md transition-shadow cursor-help overflow-hidden">
-						<span className="bg-slate-700 dark:bg-slate-600 text-white px-2.5 sm:px-4 py-1 sm:py-1.5">
-							{title}
-						</span>
-						<span className={clsx("px-2.5 sm:px-4 py-1 sm:py-1.5", statusClasses)}>
-							{support}
-						</span>
+						<span className="bg-slate-700 dark:bg-slate-600 text-white px-2.5 sm:px-4 py-1 sm:py-1.5">{title}</span>
+						<span className={clsx("px-2.5 sm:px-4 py-1 sm:py-1.5", statusClasses)}>{support}</span>
 					</div>
 				</TooltipTrigger>
 				<TooltipContent>