fix special request input updating upon editing from the bottom sheet

src/pages/cart/components/specialRequest/BottomSheet.tsx

@@ -43,10 +43,10 @@ export function BottomSheet({
       showCloseButton={false}
       initialSnap={1}
       height={370}
-      snapPoints={["30vh"]}
+      snapPoints={[370]}
     >
-      <div className="space-y-4">
       <div>
+        <div style={{ marginTop: 20 }}>
           <TextArea
             value={value}
             onChange={(e) => setValue(e.target.value)}

src/pages/cart/components/specialRequest/Dialog.tsx

@@ -53,7 +53,7 @@ export function Dialog({
       width={500}
       destroyOnHidden
     >
-      <div className="space-y-4">
+      <div>
         <TextArea
           value={value}
           onChange={(e) => setValue(e.target.value)}

src/pages/cart/components/specialRequest/SpecialRequestCard.tsx

@@ -36,7 +36,6 @@ export default function SpecialRequestCard() {
           label={t("cart.specialRequest")}
           name="specialRequest"
           style={{ position: "relative", top: -5 }}
-          initialValue={specialRequest || ""}
         >
           <Input
             placeholder={t("cart.specialRequest")}

src/pages/cart/page.tsx

@@ -1,13 +1,20 @@
 import { Form } from "antd";
 import { useEffect } from "react";
 
+import { selectCart } from "features/order/orderSlice";
 import useBreakPoint from "hooks/useBreakPoint.ts";
 import CartDesktopLayout from "pages/cart/components/CartDesktopLayout.tsx";
 import CartMobileTabletLayout from "pages/cart/components/CartMobileTabletLayout.tsx";
+import { useAppSelector } from "redux/hooks";
 
 export default function CartPage() {
   const { isDesktop } = useBreakPoint();
   const [form] = Form.useForm();
+  const { specialRequest } = useAppSelector(selectCart);
+
+  useEffect(() => {
+    form.setFieldsValue({ specialRequest });
+  }, [form, specialRequest]);
 
   // Prevent keyboard from appearing automatically on mobile
   useEffect(() => {