perf: the support modal fixed

src/components/SupportButton.tsx

@@ -1,42 +1,45 @@
-import { useState } from 'react'
+import { useState } from "react";
-import { createPortal } from 'react-dom'
+import { createPortal } from "react-dom";
-import Icon from './Icon'
+import Icon from "./Icon";
 
-const SUPPORT_PHONE = '02111111111'
+const SUPPORT_PHONE = "02111111111";
-const SUPPORT_PHONE_DISPLAY = '۰۲۱-۱۱۱۱۱۱۱۱'
+const SUPPORT_PHONE_DISPLAY = "۰۲۱-۱۱۱۱۱۱۱۱";
 
 function isMobileDevice() {
-  return 'ontouchstart' in window || navigator.maxTouchPoints > 0
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
 }
 
 export default function SupportButton({ className }: { className?: string }) {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false);
-  const [copied, setCopied] = useState(false)
+  const [copied, setCopied] = useState(false);
 
   const handleClick = () => {
     if (isMobileDevice()) {
       window.location.href = `tel:${SUPPORT_PHONE}`
     } else {
-      setOpen(true)
+    setOpen(true);
-    }
     }
+  };
 
   const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(SUPPORT_PHONE)
+      await navigator.clipboard.writeText(SUPPORT_PHONE);
-      setCopied(true)
+      setCopied(true);
-      setTimeout(() => setCopied(false), 2000)
+      setTimeout(() => setCopied(false), 2000);
     } catch {
       // silent fallback
     }
-  }
+  };
 
   return (
     <>
       <button
         type="button"
         onClick={handleClick}
-        className={className ?? 'rounded-full bg-[#223D5D] px-5 py-3 font-semibold text-white'}
+        className={
+          className ??
+          "rounded-full bg-[#223D5D] px-5 py-3 font-semibold text-white"
+        }
       >
         پشتیبانی
       </button>
@@ -44,17 +47,23 @@ export default function SupportButton({ className }: { className?: string }) {
       {open &&
         createPortal(
           <>
-            <div className="fixed inset-0 z-9998" onClick={() => setOpen(false)} />
+            <div
-            <div className="fixed inset-x-4 top-20 z-9999 rounded-2xl bg-white px-5 py-4 shadow-xl sm:inset-x-auto sm:left-1/2 sm:w-96 sm:-translate-x-1/2">
+              className="fixed inset-0 z-9998 bg-black/40"
-              <button
-                type="button"
               onClick={() => setOpen(false)}
-                className="absolute left-4 top-4 flex h-7 w-7 items-center justify-center text-gray-400 hover:text-gray-600"
+            />
-                aria-label="بستن"
+            <div
+              dir="rtl"
+              className="fixed inset-x-6 top-1/2 z-9999 -translate-y-1/2 rounded-2xl bg-white px-5 shadow-xl"
+              style={{ height: "72px" }}
             >
-                ✕
+              <div className="flex h-full items-center justify-start gap-3">
-              </button>
+                <p className="text-right text-gray-900">
-              <div className="flex items-center justify-end gap-3 pt-1">
+                  {copied ? (
+                    "کپی شد!"
+                  ) : (
+                    <div className="flex items-center gap-2">
+                      شماره تماس پشتیبانی:{" "}
+                      <span dir="ltr">{SUPPORT_PHONE_DISPLAY}</span>
                       <button
                         type="button"
                         onClick={handleCopy}
@@ -63,14 +72,22 @@ export default function SupportButton({ className }: { className?: string }) {
                       >
                         <Icon name="copy" className="h-5 w-5" />
                       </button>
-                <p dir="ltr" className="text-right text-gray-900">
+                    </div>
-                  {copied ? 'کپی شد!' : `شماره تماس پشتیبانی: ${SUPPORT_PHONE_DISPLAY}`}
+                  )}
                 </p>
+                <button
+                  type="button"
+                  onClick={() => setOpen(false)}
+                  className="absolute left-3 top-1/3 -translate-y-1/2 text-black hover:text-gray-600"
+                  aria-label="بستن"
+                >
+                  ✕
+                </button>
               </div>
             </div>
           </>,
           document.body,
         )}
     </>
-  )
+  );
 }