From f9457b04f6a141e2e2f37a30bc7627411aea432d Mon Sep 17 00:00:00 2001
From: Abhinav Arya <itzabhinavarya@gmail.com>
Date: Sun, 8 Oct 2023 10:18:00 +0000
Subject: [PATCH] Fix overlapping card content on the website using tailwind
 based approach

---
 .../components/shared/BestPracticeNavigation.tsx              | 4 ++--
 apps/formbricks-com/tailwind.config.ts                        | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx b/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
index 6951141e5e..8c82c59963 100644
--- a/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
+++ b/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
@@ -84,11 +84,11 @@ export default function BestPracticeNavigation() {
     <div className="mx-auto grid grid-cols-1 gap-6 px-2 sm:grid-cols-3">
       {BestPractices.map((bestPractice) => (
         <Link href={bestPractice.href} key={bestPractice.name}>
-          <div className="drop-shadow-card duration-120 hover:border-brand-dark break640:p-4 relative rounded-lg border border-slate-100 bg-slate-100 p-8 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800">
+          <div className="drop-shadow-card duration-120 hover:border-brand-dark relative rounded-lg border border-slate-100 bg-slate-100 p-6 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800">
             <div
               className={clsx(
                 // base styles independent what type of button it is
-                "break640:text-3xs break640:right-3 absolute right-7 rounded-full px-3 py-1",
+                "text-3xs absolute right-6 rounded-full px-3 py-1",
                 // different styles depending on type
                 bestPractice.category === "Boost Retention" &&
                   "bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",
diff --git a/apps/formbricks-com/tailwind.config.ts b/apps/formbricks-com/tailwind.config.ts
index 9f9879b56a..e1e26d3a94 100644
--- a/apps/formbricks-com/tailwind.config.ts
+++ b/apps/formbricks-com/tailwind.config.ts
@@ -69,7 +69,6 @@ export default {
       },
       screens: {
         xs: "430px",
-        break640: { min: "640px", max: "950px" },
       },
       opacity: {
         1: "0.01",