fix: known bugs

Author: geekdada

src/components/VerticalSafeArea.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { css } from '@emotion/react'
+
+export const BottomSafeArea = () => {
+  return (
+    <div
+      className="flex flex-1 sm:hidden"
+      css={css`
+        height: env(safe-area-inset-bottom, 0px);
+      `}
+    ></div>
+  )
+}

src/components/ui/dialog.tsx

@@ -40,7 +40,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'rounded-t-xl sm:rounded-xl fixed max-sm:bottom-0 left-[50%] sm:top-[50%] z-50 grid w-full sm:max-w-lg md:max-w-2xl lg:max-w-3xl max-h-[90vh] overflow-y-scroll translate-x-[-50%] sm:translate-y-[-50%] gap-4 border-t sm:border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-bottom-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-bottom-[48%] md:w-full',
+        'rounded-t-xl sm:rounded-xl fixed max-sm:bottom-0 max-sm:pb-10 left-[50%] sm:top-[50%] z-50 grid w-full sm:max-w-lg md:max-w-2xl lg:max-w-3xl max-h-[90vh] overflow-y-scroll translate-x-[-50%] sm:translate-y-[-50%] gap-4 border-t sm:border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-bottom-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-bottom-[48%] md:w-full',
         className,
       )}
       {...props}

src/pages/Home/components/SetHostModal.tsx

@@ -94,7 +94,7 @@ const SetHostModal: React.FC = () => {
         </div>
 
         <DialogFooter>
-          <Button className="mt-3" onClick={() => onAddNewProfile()}>
+          <Button className="mt-3 sm:mt-0" onClick={() => onAddNewProfile()}>
             {t('landing.add_new_host')}
           </Button>
         </DialogFooter>

src/pages/Profiles/Manage/Manage.tsx

@@ -37,6 +37,10 @@ const ManageProfiles = () => {
     undefined,
   )
 
+  const isProfileReloadSupport = useVersionSupport({
+    ios: true,
+    macos: true,
+  })
   const isProfileManagementSupport = useVersionSupport({
     macos: '4.0.6',
   })
@@ -80,7 +84,7 @@ const ManageProfiles = () => {
       console.error(err)
       toast.error(t('reload_profile_failed'))
     }
-  }, [confirm, t])
+  }, [confirm, mutateCurrentProfile, t])
 
   const onSelectProfile = useCallback(
     async (newProfile: string) => {
@@ -108,7 +112,7 @@ const ManageProfiles = () => {
         toast.error(t('select_profile_failed'))
       }
     },
-    [confirm, t],
+    [confirm, mutateCurrentProfile, t],
   )
 
   useEffect(() => {
@@ -130,6 +134,7 @@ const ManageProfiles = () => {
             <DataRowMain
               className="flex"
               disabled={
+                !isProfileReloadSupport ||
                 isCurrentProfileInvalid ||
                 isLoadingCurrentProfileValidation ||
                 isValidatingCurrentProfileValidation

src/pages/Requests/components/RequestModal.tsx

@@ -105,7 +105,7 @@ const RequestModal: React.FC<RequestModalProps> = ({ req, ...props }) => {
           </TabList>
 
           <TabPanel>
-            <div className="space-y-4 mb-5">
+            <div className="space-y-4">
               <DataGroup responsiveTitle={false}>
                 <DataRowMain responsiveFont={false}>
                   <div>{t('requests.date')}</div>