fix: height of page

Author: grv-saini-20

infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte

@@ -27,10 +27,10 @@ const cBase = "w-full h-[9vh] flex justify-between items-center";
     {:else}
         <span aria-hidden="true"></span>
     {/if}
-    <h3 class="text-center">{title}</h3>
-    {#if isUserLoggedIn}
+    <h4 class="text-center">{title}</h4>
+    <!-- {#if isUserLoggedIn}
         <Button.Icon icon={UserCircleIcon} iconSize="8.1vw" iconColor={"text-black-700"} onclick={handleProfile} />
-    {:else}
+    {:else} -->
         <span aria-hidden="true"></span>
-    {/if}
+    <!-- {/if} -->
 </header>

infrastructure/eid-wallet/src/routes/(app)/settings/+layout.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { Header } from "$lib/fragments";
+import { runtime } from "$lib/global/runtime.svelte";
+
+const { children } = $props();
+</script>
+
+<main class="h-[100vh] px-[5vw] pb-[4.5vh]">
+    <Header title={runtime.header.title ?? ""}/>
+    {@render children?.()}
+</main>

infrastructure/eid-wallet/src/routes/(app)/settings/+page.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
 import { SettingsNavigationBtn } from "$lib/fragments";
+import { runtime } from "$lib/global/runtime.svelte";
 import {
 	Key01Icon,
 	LanguageSquareIcon,
 	Link02Icon,
 	PinCodeIcon,
 	Shield01Icon,
 } from "@hugeicons/core-free-icons";
+
+$effect(() => {
+	runtime.header.title = "Settings";
+});
 </script>
 
-<main class="pt-[3vh] px-[5vw] pb-[4.5vh]">
+<main>
     <!-- header part -->
     <SettingsNavigationBtn icon={LanguageSquareIcon} label="Language" href="/settings/language"/>
     <SettingsNavigationBtn icon={Link02Icon} label="History" href="/settings/history"/>

infrastructure/eid-wallet/src/routes/(app)/settings/history/+page.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+import { runtime } from "$lib/global/runtime.svelte";
+
+$effect(() => {
+	runtime.header.title = "History";
+});
 </script>
 
 <main>
-    <h1>History Page</h1>
 </main>

infrastructure/eid-wallet/src/routes/(app)/settings/language/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { runtime } from "$lib/global/runtime.svelte";
 import { Selector } from "$lib/ui";
 
 let languages: { name: string; country: string }[] = [
@@ -8,11 +9,15 @@ let languages: { name: string; country: string }[] = [
 	{ name: "French", country: "fr" },
 ];
 let selected = $state("");
+
+$effect(() => {
+	runtime.header.title = "Language";
+});
 </script>
 
 
 
-<main class="pt-[3vh] px-[5vw] pb-[4.5vh]">
+<main>
     {#each languages as lang, i}
     <Selector id={`option-${i}`} name={lang.name} bind:selected value={lang.name}>
         {lang.name}

infrastructure/eid-wallet/src/routes/(app)/settings/pin/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { Header } from "$lib/fragments";
+import { runtime } from "$lib/global/runtime.svelte";
 import { ButtonAction, Drawer, InputPin } from "$lib/ui";
 import { CircleLock01Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -20,11 +22,12 @@ const handleChangePIN = async () => {
 };
 
 $effect(() => {
+	runtime.header.title = "Change PIN";
 	if (repeatPin.length === 4 && newPin === repeatPin) isError = false;
 });
 </script>
 
-<main class="h-[100vh] pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between gap-[3vh]">
+<main class="h-[calc(100vh-14vh)] flex flex-col justify-between">
     <section>
         <div>
             <p class="mb-[1vh]">Enter you current PIN</p>