From fbc16b3a726d06d0d99ea9f4b8804c675ebca11d Mon Sep 17 00:00:00 2001
From: Abhinav Arya <itzabhinavarya@gmail.com>
Date: Sun, 8 Oct 2023 07:07:42 +0000
Subject: [PATCH 1/5] Fix/Card overlapping issue #1001

---
 .../BestPracticeNavigation.module.css              | 14 ++++++++++++++
 .../components/shared/BestPracticeNavigation.tsx   | 10 +++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css

diff --git a/apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css b/apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css
new file mode 100644
index 0000000000..1c31b95843
--- /dev/null
+++ b/apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css
@@ -0,0 +1,14 @@
+@media screen and (max-width:960px) and (min-width:831px){
+    .category{
+        font-size: 12px;
+    }
+}
+@media screen and (max-width:830px) and (min-width:640px) {
+    .heroCard{
+        padding: 1rem;
+    }
+    .category{
+        font-size: 10px;
+        right: 10px;
+    }
+}
\ No newline at end of file
diff --git a/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx b/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
index 054cbebdbd..47c7251288 100644
--- a/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
+++ b/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
@@ -11,6 +11,9 @@ import {
 import clsx from "clsx";
 import Link from "next/link";
 
+// Importing custom CSS file for BestPracticeNavigation.tsx File.
+import style from "../customeStyles/BestPracticeNavigation.module.css";
+
 export default function BestPracticeNavigation() {
   const BestPractices = [
     {
@@ -81,14 +84,15 @@ export default function BestPracticeNavigation() {
   ];
 
   return (
-    <div className=" mx-auto grid grid-cols-1 gap-6 px-2 sm:grid-cols-3">
+    <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 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-8 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800 ${style.heroCard}`}>
             <div
               className={clsx(
                 // base styles independent what type of button it is
-                "absolute right-10 rounded-full px-3 py-1",
+                `absolute right-10 rounded-full px-3 py-1 ${style.category}`,
                 // different styles depending on type
                 bestPractice.category === "Boost Retention" &&
                   "bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",

From eca90dfd9a16adb8c7b33da3250ea995a1cf132c Mon Sep 17 00:00:00 2001
From: Abhinav Arya <itzabhinavarya@gmail.com>
Date: Sun, 8 Oct 2023 09:54:32 +0000
Subject: [PATCH 2/5] Fix overlapping card content on the website using
 tailwind based approach

---
 apps/demo/.env.example                             |  2 +-
 .../BestPracticeNavigation.module.css              | 14 --------------
 .../components/shared/BestPracticeNavigation.tsx   |  8 ++------
 apps/formbricks-com/tailwind.config.ts             |  2 ++
 4 files changed, 5 insertions(+), 21 deletions(-)
 delete mode 100644 apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css

diff --git a/apps/demo/.env.example b/apps/demo/.env.example
index e6c657045e..91292118c9 100644
--- a/apps/demo/.env.example
+++ b/apps/demo/.env.example
@@ -1,5 +1,5 @@
 NEXT_PUBLIC_FORMBRICKS_API_HOST=http://localhost:3000
-NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=YOUR_ENVIRONMENT_ID
+NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=https://formbricks-formbricks-m4jive9c4tg.ws-us105.gitpod.io/
 
 # Copy the environment ID for the URL of your Formbricks App and
 # paste it above to connect your Formbricks App with the Demo App.
diff --git a/apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css b/apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css
deleted file mode 100644
index 1c31b95843..0000000000
--- a/apps/formbricks-com/components/customeStyles/BestPracticeNavigation.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-@media screen and (max-width:960px) and (min-width:831px){
-    .category{
-        font-size: 12px;
-    }
-}
-@media screen and (max-width:830px) and (min-width:640px) {
-    .heroCard{
-        padding: 1rem;
-    }
-    .category{
-        font-size: 10px;
-        right: 10px;
-    }
-}
\ No newline at end of file
diff --git a/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx b/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
index 47c7251288..6951141e5e 100644
--- a/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
+++ b/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
@@ -11,9 +11,6 @@ import {
 import clsx from "clsx";
 import Link from "next/link";
 
-// Importing custom CSS file for BestPracticeNavigation.tsx File.
-import style from "../customeStyles/BestPracticeNavigation.module.css";
-
 export default function BestPracticeNavigation() {
   const BestPractices = [
     {
@@ -87,12 +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 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 ${style.heroCard}`}>
+          <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={clsx(
                 // base styles independent what type of button it is
-                `absolute right-10 rounded-full px-3 py-1 ${style.category}`,
+                "break640:text-3xs break640:right-3 absolute right-7 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 25d3466b7f..9f9879b56a 100644
--- a/apps/formbricks-com/tailwind.config.ts
+++ b/apps/formbricks-com/tailwind.config.ts
@@ -20,6 +20,7 @@ export default {
   darkMode: "class",
   theme: {
     fontSize: {
+      "3xs": ["0.65rem", { lineHeight: "1.25rem" }],
       "2xs": ["0.75rem", { lineHeight: "1.25rem" }],
       xs: ["0.75rem", { lineHeight: "1rem" }],
       sm: ["0.875rem", { lineHeight: "1.5rem" }],
@@ -68,6 +69,7 @@ export default {
       },
       screens: {
         xs: "430px",
+        break640: { min: "640px", max: "950px" },
       },
       opacity: {
         1: "0.01",

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 3/5] 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",

From 6ccbd559fb88886daa4e491ef60f0dd8500a1b59 Mon Sep 17 00:00:00 2001
From: Johannes <johannes@formbricks.com>
Date: Sun, 8 Oct 2023 16:31:27 +0530
Subject: [PATCH 4/5] Reset env in demo app

---
 apps/demo/.env.example | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/demo/.env.example b/apps/demo/.env.example
index 16c78f9d4e..e6c657045e 100644
--- a/apps/demo/.env.example
+++ b/apps/demo/.env.example
@@ -1,5 +1,5 @@
-NEXT_PUBLIC_FORMBRICKS_API_HOST=
-NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
+NEXT_PUBLIC_FORMBRICKS_API_HOST=http://localhost:3000
+NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=YOUR_ENVIRONMENT_ID
 
 # Copy the environment ID for the URL of your Formbricks App and
 # paste it above to connect your Formbricks App with the Demo App.

From 35e3cdcd0d6116e92e712bd3887bc63abc60a7f3 Mon Sep 17 00:00:00 2001
From: Johannes <johannes@formbricks.com>
Date: Sun, 8 Oct 2023 16:39:23 +0530
Subject: [PATCH 5/5] actually fix it ;)

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

diff --git a/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx b/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
index 8c82c59963..b22034a06c 100644
--- a/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
+++ b/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
@@ -1,12 +1,12 @@
 import {
+  BaseballIcon,
   CancelSubscriptionIcon,
+  CodeBookIcon,
   DogChaserIcon,
   FeedbackIcon,
   InterviewPromptIcon,
   OnboardingIcon,
   PMFIcon,
-  BaseballIcon,
-  CodeBookIcon,
 } from "@formbricks/ui";
 import clsx from "clsx";
 import Link from "next/link";
@@ -81,14 +81,14 @@ export default function BestPracticeNavigation() {
   ];
 
   return (
-    <div className="mx-auto grid grid-cols-1 gap-6 px-2 sm:grid-cols-3">
+    <div className="mx-auto grid grid-cols-1 gap-6 px-2 md:grid-cols-3">
       {BestPractices.map((bestPractice) => (
         <Link href={bestPractice.href} key={bestPractice.name}>
           <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
-                "text-3xs absolute right-6 rounded-full px-3 py-1",
+                "absolute right-6 rounded-full px-3 py-1 text-xs lg:text-sm",
                 // 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 e1e26d3a94..25d3466b7f 100644
--- a/apps/formbricks-com/tailwind.config.ts
+++ b/apps/formbricks-com/tailwind.config.ts
@@ -20,7 +20,6 @@ export default {
   darkMode: "class",
   theme: {
     fontSize: {
-      "3xs": ["0.65rem", { lineHeight: "1.25rem" }],
       "2xs": ["0.75rem", { lineHeight: "1.25rem" }],
       xs: ["0.75rem", { lineHeight: "1rem" }],
       sm: ["0.875rem", { lineHeight: "1.5rem" }],