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/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

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(),

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;