preview the special request in mobile screen

src/pages/product/components/ProductFooter.tsx

@@ -1,5 +1,5 @@
-import { ShoppingCartOutlined } from "@ant-design/icons";
-import { Button, message, Row } from "antd";
+import { RightOutlined, ShoppingCartOutlined } from "@ant-design/icons";
+import { Button, Form, Input, message, Row } from "antd";
 import {
   addItem,
   selectCart,
@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { colors, ProBlack2 } from "ThemeConstants";
 import { Product } from "utils/types/appTypes";
+import styles from "../product.module.css";
 
 export default function ProductFooter({
   product,
@@ -85,14 +86,12 @@ export default function ProductFooter({
 
   const handleSpecialRequestSave = (value: string) => {
     dispatch(updateSpecialRequest(value));
-    message.success(t("cart.specialRequest") + " " + t("common.confirm"));
   };
 
   const handleSpecialRequestClose = () => {
     setIsSpecialRequestOpen(false);
   };
 
-  //
   return (
     <>
       <Row
@@ -112,10 +111,45 @@ export default function ProductFooter({
                 [isRTL ? "right" : "left"]: 0,
                 width: hasCustomizationOptions ? "50%" : "100%",
               }),
-          height: "10vh",
+          height: "135px",
         }}
       >
-        <div style={{ width: "100%" }}>
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              gap: "12px",
+              width: "100%",
+            }}
+          >
+            <Form.Item
+              name="specialRequest"
+              style={{ position: "relative", top: -5, width: "100%" }}
+            >
+              <Input
+                value={specialRequest}
+                placeholder={t("cart.specialRequest")}
+                size="large"
+                autoFocus={false}
+                className={styles.inputField}
+                suffix={
+                  <div
+                    className={styles.editButton}
+                    onClick={() => setIsSpecialRequestOpen(true)}
+                  >
+                    <u>{t("cart.editNote")}</u> <RightOutlined />
+                  </div>
+                }
+              />
+            </Form.Item>
+          </div>
           <div
             style={{
               display: "flex",
@@ -130,7 +164,7 @@ export default function ProductFooter({
               disabled={!isValid}
               style={{
                 flex: 1,
-                height: isMobile ? "48px" : "48px",
+                height: "48px",
                 fontSize: isMobile ? "1rem" : "16px",
                 transition: "all 0.3s ease",
                 width: "100%",