modif simplemobnav to look like a smartphone on big screen

wco/simplemobnav/main.mustache

@@ -1,4 +1,4 @@
- <div class="py-1">
+ <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"
@@ -25,5 +25,5 @@
           <span class="loading loading-spinner loading-lg text-secondary"></span>
     </div>
 </div>
-<div id="{{contentid}}" wco-name="{{contentwconame}}" wco-link="{{contentscreen}}" class="mt-5 sm:mx-auto sm:w-full sm:max-w-sm"></div>
-<div class="navlink"></div>
+<div id="{{contentid}}" wco-name="{{contentwconame}}" wco-link="{{contentscreen}}" class="flex flex-col overflow-y-auto flex justify-center"></div>
+<div class="navlink flex justify-around border-t bg-base-200 p-2"></div>

wco/simplemobnav/mainold.mustache

@@ -0,0 +1,29 @@
+ <div class="py-1">
+    <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>
+<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="mt-5 sm:mx-auto sm:w-full sm:max-w-sm"></div>
+<div class="navlink"></div>

wco/simplemobnav/navbuttonh.mustache

@@ -1,11 +1,8 @@
-<div class="flex justify-center gap-2 p-4">
   {{#links}}
-  <button class="btn {{classnavbutton}} flex-col gap-1" onclick="apx.simplemobnav.action('{{id}}','{{link}}','{{action}}','{{wconame}}');">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-16 h-16 box-content">
-         <path stroke-linecap="round" stroke-linejoin="round" d="{{d}}" />
-    </svg>
-    <span class="text-sm">{{{shortlabel}}}</span>
-  </button>
+      <button class="{{classnavbutton}} btn btn-ghost btn-sm flex flex-col items-center" onclick="apx.simplemobnav.action('{{id}}','{{link}}','{{action}}','{{wconame}}');">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{d}}"/></svg>
+        <span class="text-xs">{{{shortlabel}}}</span>
+      </button>
   {{/links}}
-</div>
+
 

wco/simplemobnav/navbuttonhold.mustache

@@ -0,0 +1,11 @@
+<div class="flex justify-center gap-2 p-4">
+  {{#links}}
+  <button class="btn {{classnavbutton}} flex-col gap-1" onclick="apx.simplemobnav.action('{{id}}','{{link}}','{{action}}','{{wconame}}');">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-16 h-16 box-content">
+         <path stroke-linecap="round" stroke-linejoin="round" d="{{d}}" />
+    </svg>
+    <span class="text-sm">{{{shortlabel}}}</span>
+  </button>
+  {{/links}}
+</div>
+