src/App.svelte

@@ -55,5 +55,6 @@
 		width: 100%;
 		position: relative;
 		max-width: var(--max-viewport-width);
+		padding: 10px;
 	}
 </style>

src/__layout.svelte

@@ -1,3 +1,3 @@
-<main class="w-full h-full">
+<main class="w-full h-full ">
 	<slot />
 </main>

src/__routes.svelte

@@ -5,6 +5,7 @@
 	import Loading from '$src/__loading.svelte'
 	import Error from '$src/__error.svelte'
 	import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
+	import ArrowBackLayout from '$lib/components/Layouts/ArrowBackLayout.svelte'
 </script>
 
 <Router
@@ -50,7 +51,7 @@
 		{
 			path: '/profile/setting/:function',
 			component: () => import('$routes/profile/profile-functions.svelte'),
-			layout: NavigationBarLayout,
+			layout: ArrowBackLayout,
 		},
 		{
 			path: '/login',

src/lib/components/Layouts/ArrowBackLayout.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { navigate } from '$lib/router'
+	import ArrowBack from '$lib/svg/ArrowBack.svelte'
+</script>
+
+<div class="w-full h-auto flex flex-wrap flex-col">
+	<button
+		class="absolute mt-4 z-50"
+		on:click={() => {
+			navigate(-1)
+		}}
+	>
+		<ArrowBack />
+	</button>
+	<slot />
+</div>

src/routes/profile/profile-functions.svelte

@@ -24,28 +24,21 @@
 	}
 </script>
 
-<div class="main">
+<div class="main w-full">
 	<div class="head">
-		<button
-			on:click={() => {
-				navigate('/profile')
-			}}
-		>
-			<ArrowBack />
-		</button>
 		<h1>{data.display_name}</h1>
 	</div>
-	
+
 	<svelte:component this={data.view} />
 </div>
 
 <style lang="scss">
-	.main{
+	.main {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: stretch;
-		height: 100%;
+		height: auto;
 		.head {
 			width: 100%;
 			display: flex;
@@ -56,7 +49,7 @@
 			margin-bottom: 20px;
 
 			position: relative;
-			
+
 			h1 {
 				font-weight: 600;
 				font-size: 32px;

src/routes/profile/profile.svelte

@@ -16,10 +16,9 @@
 	import collections from '$lib/collections'
 	import { Query } from 'appwrite'
 
-
 	export let params: { erantId: string }
 	//
-	$: [userInfo] = collections.users.getDocument([Query.equal('userID', params.erantId)])
+	$: [userInfo] = collections.users.getDocument([Query.equal('erantId', params.erantId)])
 
 	$: console.log($user)