feat: setup safe area

Author: JulienAuvo

infrastructure/eid-wallet/src/app.css

@@ -15,6 +15,15 @@
 	font-style: normal;
 }
 
+@layer utilities  {
+	.safe-area {
+	  padding-top: env(safe-area-inset-top);
+	  padding-bottom: env(safe-area-inset-bottom);
+	  padding-left: env(safe-area-inset-left);
+	  padding-right: env(safe-area-inset-right);
+	}
+}
+
 @layer base {
 	/* Typography */
 

infrastructure/eid-wallet/src/routes/+layout.svelte

@@ -11,16 +11,18 @@ $effect(() => {
 });
 </script>
 
-{#if showSplashScreen}
-    <div class="relative w-full h-[100vh] bg-primary">
-        <img class="absolute w-full bottom-[-80px] start-0" src="/images/Shape1.svg" alt="illustration">
-        <img class="absolute w-full top-[50px] end-[100px]" src="/images/Shape2.svg" alt="illustration">
-        <div class="absolute w-full top-[42%] start-[50%] translate-x-[-50%] translate-y-[-42%]">
-            <h1 class="text-center text-white text-[44px]">eAgency</h1>
-            <p class="text-center text-white">Your self-sovereign digital entity</p>
+<div class="safe-area">
+    {#if showSplashScreen}
+        <div class="relative w-full h-[100vh] bg-primary">
+            <img class="absolute w-full bottom-[-80px] start-0" src="/images/Shape1.svg" alt="illustration">
+            <img class="absolute w-full top-[50px] end-[100px]" src="/images/Shape2.svg" alt="illustration">
+            <div class="absolute w-full top-[42%] start-[50%] translate-x-[-50%] translate-y-[-42%]">
+                <h1 class="text-center text-white text-[44px]">eAgency</h1>
+                <p class="text-center text-white">Your self-sovereign digital entity</p>
+            </div>
+            <img class="absolute bottom-[116px] start-[50%] translate-x-[-50%]" src="/images/W3DSLogoWhite.svg" alt="logo">
         </div>
-        <img class="absolute bottom-[116px] start-[50%] translate-x-[-50%]" src="/images/W3DSLogoWhite.svg" alt="logo">
-    </div>
-{:else}
-    {@render children?.()}
-{/if}
+    {:else}
+        {@render children?.()}
+    {/if}
+</div>