From 6187c37afc8182d1313511ffb2b8ccd2838bcd1d Mon Sep 17 00:00:00 2001
From: Kevin Foong <55353265+kevin9foong@users.noreply.github.com>
Date: Fri, 29 Nov 2024 23:43:49 +0800
Subject: [PATCH] fix: disable support for mfb for mobile

---
 .../FieldListDrawer/FieldListDrawer.tsx       | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
index 2fd9cb5730..22c85b0c73 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -18,6 +18,7 @@ import {
   Tooltip,
 } from '@chakra-ui/react'
 
+import { useIsMobile } from '~hooks/useIsMobile'
 import { Tab } from '~components/Tabs'
 
 import { useCreatePageSidebar } from '~features/admin-form/create/common/CreatePageSidebarContext'
@@ -32,21 +33,24 @@ import {
   PaymentsInputPanel,
 } from './field-panels'
 
-const MagicFormBuilderButton = ({ ...styleProps }) => (
-  <Tooltip openDelay={800} hasArrow label="Create fields with AI">
-    <Button
-      padding="0"
-      backgroundColor="primary.200"
-      _hover={{
-        backgroundColor: 'primary.300',
-      }}
-      borderWidth={0}
-      {...styleProps}
-    >
-      <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
-    </Button>
-  </Tooltip>
-)
+const MagicFormBuilderButton = ({ ...styleProps }) => {
+  const isMobile = useIsMobile()
+  return !isMobile ? (
+    <Tooltip openDelay={800} hasArrow label="Create fields with AI">
+      <Button
+        padding="0"
+        backgroundColor="primary.200"
+        _hover={{
+          backgroundColor: 'primary.300',
+        }}
+        borderWidth={0}
+        {...styleProps}
+      >
+        <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
+      </Button>
+    </Tooltip>
+  ) : null
+}
 
 const FieldSearchBar = ({
   searchValue,