feat(panel-wrapper): show modal only for smaller screens

src/pages/ManageValidator/RightManagePanels/PanelWrapper.tsx

@@ -1,11 +1,10 @@
-import { Text } from '@status-im/components'
-import { ExpandRsIcon } from '@status-im/icons'
 import { useState } from 'react'
 import Modal from 'react-modal'
 import { useNavigate, useParams } from 'react-router-dom'
-import { XStack, YStack } from 'tamagui'
 
 import { PATHS } from '../../../constants'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import PanelContent from './PanelContent'
 
 type PanelWrapperProps = {
   children: React.ReactNode
@@ -16,6 +15,8 @@ const PanelWrapper = ({ children, title }: PanelWrapperProps) => {
   const [isModalOpen, setIsModalOpen] = useState(true)
   const navigate = useNavigate()
   const { validatorName } = useParams()
+  const { width } = useWindowSize()
+  const isModalWidth = width < 1160
 
   const closeModal = () => {
     setIsModalOpen(false)
@@ -23,36 +24,36 @@ const PanelWrapper = ({ children, title }: PanelWrapperProps) => {
   }
 
   return (
-    <Modal
+    <>
-      isOpen={isModalOpen}
+      {isModalWidth ? (
-      onRequestClose={closeModal}
+        <Modal
-      style={{
+          isOpen={isModalOpen}
-        content: {
+          onRequestClose={closeModal}
-          borderRadius: '12px',
+          style={{
-          width: '70%',
+            content: {
-          margin: '0 auto',
+              borderRadius: '12px',
-          scrollbarWidth: 'thin',
+              width: '70%',
-          scrollbarColor: 'transparent transparent',
+              margin: '0 auto',
-        },
+              scrollbarWidth: 'thin',
-        overlay: {
+              scrollbarColor: 'transparent transparent',
-          zIndex: 2,
+            },
-        },
+            overlay: {
-      }}
+              zIndex: 2,
-    >
+            },
-      <YStack space={'$3'} style={{ padding: '30px', alignItems: 'start' }}>
+          }}
-        <XStack style={{ width: '100%', justifyContent: 'space-between' }}>
+        >
-          <Text size={19} weight={'semibold'}>
+          <PanelContent title={title} closeModal={closeModal}>
-            {title}
+            {children}
-          </Text>
+          </PanelContent>
-          <ExpandRsIcon
+        </Modal>
-            size={20}
+      ) : (
-            style={{ cursor: 'pointer' }}
+        <div>
-            onClick={closeModal}
+          <PanelContent title={title} closeModal={closeModal}>
-          />
+            {children}
-        </XStack>
+          </PanelContent>
-        {children}
+        </div>
-      </YStack>
+      )}
-    </Modal>
+    </>
   )
 }