fix: UI and UX onboarding tuto for mobile

Author: gparant

src/Iframes/TutorialV1/Tuto/Components/App.svelte

@@ -15,7 +15,7 @@
     }
 </script>
 
-<div class="tuto  tw-h-full tw-text-center tw-bg-transparent">
+<div class="tuto tw-h-full tw-w-[98vw] tw-text-center tw-bg-transparent">
     <Steps 
         on:close={close}
         on:skip={close}
@@ -33,9 +33,4 @@
             <Step3 />
         {/if}
     </Steps>
-</div>
-<style>
-    .tuto{
-        min-width: 500px;
-    }
-</style>
+</div>

src/Iframes/TutorialV1/Tuto/Components/Steps.svelte

@@ -24,11 +24,11 @@
     }
     $: console.log('Current Step:', $currentStepStore);
 </script>
-<div class="tw-flex tw-flex-col  tw-w-full  tw-pt-20 tw-pb-24 ">
+<div class="tw-flex tw-flex-col tw-w-full tw-pt-20 tw-pb-24 ">
 
 
 
-    <div class="header  tw-p-3 tw-flex tw-justify-center  tw-absolute tw-top-7 sm:tw-top-14 tw-w-full tw-h-3 tw-overflow-visible   ">
+    <div class="header tw-p-3 tw-flex tw-justify-center  tw-absolute tw-top-7 sm:tw-top-14 tw-w-full tw-h-3 tw-overflow-visible   ">
         <nav class="tw-flex  tw-gap-2 tw-py-4 tw-text-sm tw-font-medium tw-items-center">
             {#each steps as step, index}
             <button

src/Iframes/TutorialV1/Tuto/Components/Steps/Step1.svelte

@@ -3,7 +3,7 @@
 </script>
 
 
-<div class=" tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-10 tw-mb-5 tw-text-white tw-h-auto tw-px-4 sm:tw-px-10">
+<div class=" tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-10 tw-mb-5 tw-text-white tw-h-auto tw-px-0 sm:tw-px-10">
 
 
 

src/Iframes/TutorialV1/Tuto/Components/Steps/Step2.svelte

@@ -1,7 +1,7 @@
 <script>
     import i18next from "i18next";
 </script>
-<div class="tw-flex tw-flex-col tw-mt-10  tw-items-center tw-justify-center tw-mb-5 tw-text-white tw-px-8">
+<div class="tw-flex tw-flex-col tw-mt-10  tw-items-center tw-justify-center tw-mb-5 tw-text-white tw-px-0 sm:tw-px-10">
 
         <h1>{i18next.t("tuto.step2.title")}</h1>
         <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>

src/Iframes/TutorialV1/Tuto/Components/Steps/Step3.svelte

@@ -3,7 +3,7 @@
     import i18next from "i18next";
 
 </script>
-<div class="tw-flex tw-flex-col tw-mt-10  tw-items-center tw-justify-center tw-mb-5 tw-text-white tw-px-8">
+<div class="tw-flex tw-flex-col tw-mt-10  tw-items-center tw-justify-center tw-mb-5 tw-text-white tw-px-0 sm:tw-px-10">
 
         <h1>{i18next.t("tuto.step3.title")}</h1>
         <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>

src/Iframes/TutorialV1/Tuto/Components/Steps/Welcome.svelte

@@ -5,7 +5,7 @@ import i18next from "i18next";
 </script>
 
 
-    <div class="tw-flex tw-flex-col tw-items-center tw-mt-10 tw-mb-5 tw-text-white tw-h-auto tw-px-4 sm:tw-px-10 tw-overflow-x-hidden tw-w-full tw-max-w-full"> 
+    <div class="tw-flex tw-flex-col tw-items-center tw-mt-10 tw-mb-5 tw-text-white tw-h-auto tw-px-0 sm:tw-px-10 tw-overflow-x-hidden tw-w-full tw-max-w-full"> 
 
             <h1>{i18next.t('tuto.welcome.title')}</h1>
             <p class="tw-w-10/12 sm:tw-w-full-"> {i18next.t('tuto.welcome.subtitle')} </p>