chore: handled multiple children rendering in the space layout (#4459)

space/app/error.tsx

@@ -17,11 +17,10 @@ export default function InstanceError() {
   };
 
   return (
-    <div>
+    <div className="relative h-screen overflow-x-hidden overflow-y-auto container px-5 mx-auto flex justify-center items-center">
-      <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
       <div className="w-auto max-w-2xl relative space-y-8 py-10">
         <div className="relative flex flex-col justify-center items-center space-y-4">
-            <Image src={instanceImage} alt="Plane Logo" />
+          <Image src={instanceImage} alt="Plane instance failure image" />
           <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
           <p className="font-medium text-base text-center">
             We were unable to fetch the details of the instance. <br />
@@ -35,6 +34,5 @@ export default function InstanceError() {
         </div>
       </div>
     </div>
-    </div>
   );
 }

space/app/layout.tsx

@@ -46,8 +46,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           ) : (
             <>{instanceDetails.instance.is_setup_done ? <>{children}</> : <InstanceNotReady />}</>
           )}
-
-          {children}
         </AppProvider>
       </body>
     </html>

space/app/not-found.tsx

@@ -1,11 +1,11 @@
 "use client";
+
 import Image from "next/image";
 // assets
 import UserLoggedInImage from "public/user-logged-in.svg";
 
 export default function InstanceNotFound() {
   return (
-    <div>
     <div className="flex h-screen w-screen flex-col">
       <div className="grid h-full w-full place-items-center p-6">
         <div className="text-center">
@@ -19,6 +19,5 @@ export default function InstanceNotFound() {
         </div>
       </div>
     </div>
-    </div>
   );
 }

space/components/instance/instance-failure-view.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { FC } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
@@ -7,11 +8,7 @@ import { Button } from "@plane/ui";
 import InstanceFailureDarkImage from "public/instance/instance-failure-dark.svg";
 import InstanceFailureImage from "public/instance/instance-failure.svg";
 
-type InstanceFailureViewProps = {
+export const InstanceFailureView: FC = () => {
-  // mutate: () => void;
-};
-
-export const InstanceFailureView: FC<InstanceFailureViewProps> = () => {
   const { resolvedTheme } = useTheme();
 
   const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
@@ -21,10 +18,10 @@ export const InstanceFailureView: FC<InstanceFailureViewProps> = () => {
   };
 
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
+    <div className="relative h-screen overflow-x-hidden overflow-y-auto container px-5 mx-auto flex justify-center items-center">
       <div className="w-auto max-w-2xl relative space-y-8 py-10">
         <div className="relative flex flex-col justify-center items-center space-y-4">
-          <Image src={instanceImage} alt="Plane Logo" />
+          <Image src={instanceImage} alt="Plane instance failure image" />
           <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
           <p className="font-medium text-base text-center">
             We were unable to fetch the details of the instance. <br />

space/store/user.store.ts

@@ -5,9 +5,10 @@ import { IUser } from "@plane/types";
 // services
 import { AuthService } from "@/services/auth.service";
 import { UserService } from "@/services/user.service";
-// stores
+// store types
-import { RootStore } from "@/store/root.store";
 import { ProfileStore, IProfileStore } from "@/store/profile.store";
+import { RootStore } from "@/store/root.store";
+// types
 import { ActorDetail } from "@/types/issue";
 
 type TUserErrorStatus = {