simplemobnav change to look like smartphone

wco/apxauth/main_fr.mustache

@@ -1,7 +1,7 @@
 <!-- screen action-->
-<div class="screenaction mt-5 m-2 sm:mx-auto sm:w-full sm:max-w-sm">
+<div class="screenaction mt-5 px-7 w-full">
 </div>
 <!-- feedback action-->
-<div class="my-5">
+<div class="my-5 w-full">
     <p class="msginfo text-center text-info"></p>
 </div>

wco/apxauth/screeninformation_fr.mustache

@@ -1,4 +1,4 @@
-<div class="space-y-6 text-justify">
+<div class="mx-3 my-auto text-justify">
     <h2>Qu'est-ce qu'une identité numérique décentralisée?</h2>
     <p>
         C'est <span class="text-secondary">un moyen de s'identifier en prouvant qu'on est le propriétaire

wco/apxauth/screensignup_fr.mustache

@@ -1,10 +1,10 @@
 <div class="w-full">
-  <p data-wco="createid" class="text-center text-neutral-content">
+  <p data-wco="createid" class="text-center text-neutral-content w-full">
     {{{signuptitle}}}
   </p>
   <div class="paramid space-y-3 w-full">
       <div class="mt-2">
-        <label class="input validator mbt-1 w-full max-w-full">
+        <label class="input validator mbt-1 w-full">
           <svg class="h-[1em] opacity-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
             <g
               stroke-linejoin="round"
@@ -32,7 +32,7 @@
         </div>
       </div>
       <div class="mt-2">
-        <label class="input validator mt-1 w-full max-w-full">
+        <label class="input validator mt-1 w-full">
           <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
             <g
               stroke-linejoin="round"
@@ -52,7 +52,7 @@
         </div>
       </div>
       <div class="mt-2">  
-        <label class="input mt-1 w-full max-w-full">
+        <label class="input mt-1 w-full">
           <svg class="h-[1em] opacity-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
             <g
               stroke-linejoin="round"
@@ -81,12 +81,12 @@
         </button>
       </div>
   </div>
-  <div class="getmykeys hidden mt-1">
+  <div class="getmykeys hidden mt-1 w-full">
     <div class="flex m-6">
       <div class="w-14 flex-none">
             <input type="checkbox" checked="checked" class="signuptrustedcheck checkbox checkbox-secondary" />
       </div>
-      <div class="flex-1">
+      <div class="flex-1 w-full">
         <p class="text-sm text-justify" >{{{trusttext}}}</p>
       </div>
     </div>

wco/simplemobnav/main.mustache

@@ -1,29 +1,35 @@
- <div class="py-1 sm:w-full sm:max-w-sm mx-auto">
-    <img
-        class="mx-auto w-auto block dark:hidden"
-        data-wco="logo"
-        src="{{logobglight.src}}"
-        alt="{{logobglight.alt}}"
-        src="{{logobgdark.src}}"
-        alt="{{logobgdark.alt}}"
-    />
-    <img
-        class="mx-auto w-auto hidden dark:block"
-        data-wco="logo"
-        src="{{logobgdark.src}}"
-        alt="{{logobgdark.alt}}"
-    />
-    <h2
-        class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight"
-        data-wco="claim"
-    >
-        {{claim.textContent}}
-    </h2>
+<div id="pageheader" class="py-5 w-full max-w-sm mx-auto">
+     <div class="flex flex-col items-center h-sm:flex-row h-sm:text-start h-sm:items-start h-sm:gap-4">
+        <div class="h-sm:w-1/3">
+            <img
+                class="mx-auto w-auto block dark:hidden h-sm:max-h-10"
+                data-wco="logo"
+                src="{{logobglight.src}}"
+                alt="{{logobglight.alt}}"
+                src="{{logobgdark.src}}"
+                alt="{{logobgdark.alt}}"
+            />
+            <img
+                class="mx-auto w-auto hidden dark:block h-sm:max-h-10"
+                data-wco="logo"
+                src="{{logobgdark.src}}"
+                alt="{{logobgdark.alt}}"
+            />
+        </div>
+        <div class="h-sm:w-2/3">
+            <h2
+                class="mt-10 h-sm:mt-0 h-sm:text-lg text-2xl font-bold leading-9 tracking-tight"
+                data-wco="claim"
+            >
+                {{claim.textContent}}
+            </h2>
+        </div>
+    </div>    
 </div>
 <div id="loading" class="flex min-h-full flex-col justify-center">
     <div class="sm:mx-auto sm:w-full sm:max-w-sm py-4 text-center">
           <span class="loading loading-spinner loading-lg text-secondary"></span>
     </div>
 </div>
-<div id="{{contentid}}" wco-name="{{contentwconame}}" wco-link="{{contentscreen}}" class="flex flex-col overflow-y-auto flex justify-center"></div>
+<div id="{{contentid}}" wco-name="{{contentwconame}}" wco-link="{{contentscreen}}" class="py-5 flex-grow flex flex-col overflow-y-auto items-start"></div>
 <div class="navlink flex justify-around border-t bg-base-200 p-2"></div>