From 7c8dbb3ea3e3f9907c1c23bbfec2276eb4d7d44f Mon Sep 17 00:00:00 2001
From: Bandhan Majumder <133476557+bandhan-majumder@users.noreply.github.com>
Date: Thu, 7 Aug 2025 19:59:21 +0530
Subject: [PATCH] fix: contact support button overlap (#22952)

* add: lib folder in tailwind config

* move plainChat and contactForm from lib to components

* Update tailwind-preset.js
---
 apps/web/{lib => components}/plain/PlainContactForm.tsx       | 2 +-
 apps/web/components/plain/__tests__/PlainContactForm.test.tsx | 2 +-
 apps/web/{lib => components}/plain/plainChat.tsx              | 0
 apps/web/lib/plain/dynamicProvider.tsx                        | 4 +++-
 4 files changed, 5 insertions(+), 3 deletions(-)
 rename apps/web/{lib => components}/plain/PlainContactForm.tsx (99%)
 rename apps/web/{lib => components}/plain/plainChat.tsx (100%)

diff --git a/apps/web/lib/plain/PlainContactForm.tsx b/apps/web/components/plain/PlainContactForm.tsx
similarity index 99%
rename from apps/web/lib/plain/PlainContactForm.tsx
rename to apps/web/components/plain/PlainContactForm.tsx
index e6d20076c8..5fed93dc5b 100644
--- a/apps/web/lib/plain/PlainContactForm.tsx
+++ b/apps/web/components/plain/PlainContactForm.tsx
@@ -156,7 +156,7 @@ const PlainContactForm = () => {
 
         <PopoverContent
           style={{ maxWidth: "450px", maxHeight: "650px" }}
-          className="!bg-muted no-scrollbar mr-8 mb-2 w-[450px] overflow-hidden overflow-y-scroll px-6 py-4">
+          className="!bg-muted no-scrollbar mb-2 mr-8 w-[450px] overflow-hidden overflow-y-scroll px-6 py-4">
           <div className="flex w-full justify-between">
             <p className="mb-5 text-lg font-semibold">Contact support</p>
             <Button
diff --git a/apps/web/components/plain/__tests__/PlainContactForm.test.tsx b/apps/web/components/plain/__tests__/PlainContactForm.test.tsx
index 10fce46e85..1cf11ec26a 100644
--- a/apps/web/components/plain/__tests__/PlainContactForm.test.tsx
+++ b/apps/web/components/plain/__tests__/PlainContactForm.test.tsx
@@ -4,7 +4,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 
 import { showToast } from "@calcom/ui/components/toast";
 
-import PlainContactForm from "../../../lib/plain/PlainContactForm";
+import PlainContactForm from "../PlainContactForm";
 
 vi.mock("next-auth/react", () => ({
   useSession: vi.fn(),
diff --git a/apps/web/lib/plain/plainChat.tsx b/apps/web/components/plain/plainChat.tsx
similarity index 100%
rename from apps/web/lib/plain/plainChat.tsx
rename to apps/web/components/plain/plainChat.tsx
diff --git a/apps/web/lib/plain/dynamicProvider.tsx b/apps/web/lib/plain/dynamicProvider.tsx
index 87be1aa8d0..14f4678a03 100644
--- a/apps/web/lib/plain/dynamicProvider.tsx
+++ b/apps/web/lib/plain/dynamicProvider.tsx
@@ -2,4 +2,6 @@ import dynamic from "next/dynamic";
 import { Fragment } from "react";
 
 // Preload caused by dynamic import doesn't seem to add nonce and thus preload fails but the functionality still works - https://github.com/vercel/next.js/issues/81260
-export default process.env.NEXT_PUBLIC_PLAIN_CHAT_ID ? dynamic(() => import("./plainChat")) : Fragment;
+export default process.env.NEXT_PUBLIC_PLAIN_CHAT_ID
+  ? dynamic(() => import("../../components/plain/plainChat"))
+  : Fragment;