better responsiveness and design of wallet is ready screen

ng-app/src/lib/FullLayout.svelte

@@ -91,15 +91,15 @@
   <div class="full-layout">
     <Sidebar {activeUrl} {asideClass} {nonActiveClass} class="fixed">
       <SidebarWrapper
-        divClass="bg-gray-60 overflow-y-auto tall:py-4 px-3 rounded dark:bg-gray-800"
+        divClass="bg-gray-60 overflow-y-auto tall-xs:py-4 px-3 rounded dark:bg-gray-800"
       >
-        <SidebarGroup ulClass="space-y-1 tall:space-y-2">
+        <SidebarGroup ulClass="space-y-1 tall-xs:space-y-2">
           <SidebarItem label="NextGraph" href="#/user" class="mt-1">
             <svelte:fragment slot="icon">
               {#if $online}
-                <Logo class="w-7 h-7 tall:w-10 tall:h-10" />
+                <Logo class="w-7 h-7 tall-xs:w-10 tall-xs:h-10" />
               {:else}
-                <LogoGray class="w-7 h-7 tall:w-10 tall:h-10" />
+                <LogoGray class="w-7 h-7 tall-xs:w-10 tall-xs:h-10" />
               {/if}
             </svelte:fragment>
           </SidebarItem>
@@ -107,7 +107,7 @@
             label="Home"
             href="#/"
             on:click={scrollToTop}
-            class="py-1 tall:p-2"
+            class="py-1 tall-xs:p-2"
           >
             <svelte:fragment slot="icon">
               <Home
@@ -116,7 +116,7 @@
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Stream" href="#/stream" class="py-1 tall:p-2">
+          <SidebarItem label="Stream" href="#/stream" class="py-1 tall-xs:p-2">
             <svelte:fragment slot="icon">
               <Bolt
                 tabindex="-1"
@@ -124,7 +124,7 @@
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Search" href="#/search" class="py-1 tall:p-2">
+          <SidebarItem label="Search" href="#/search" class="py-1 tall-xs:p-2">
             <svelte:fragment slot="icon">
               <MagnifyingGlass
                 tabindex="-1"
@@ -132,7 +132,7 @@
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Create" href="#/create" class="py-1 tall:p-2">
+          <SidebarItem label="Create" href="#/create" class="py-1 tall-xs:p-2">
             <svelte:fragment slot="icon">
               <PlusCircle
                 tabindex="-1"
@@ -140,7 +140,7 @@
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Shared" href="#/shared" class="py-1 tall:p-2">
+          <SidebarItem label="Shared" href="#/shared" class="py-1 tall-xs:p-2">
             <svelte:fragment slot="icon">
               <Users
                 tabindex="-1"
@@ -148,7 +148,7 @@
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Site" href="#/site" class="py-1 tall:p-2">
+          <SidebarItem label="Site" href="#/site" class="py-1 tall-xs:p-2">
             <svelte:fragment slot="icon">
               <User
                 tabindex="-1"
@@ -156,7 +156,11 @@
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Messages" href="#/messages" class="py-1 tall:p-2">
+          <SidebarItem
+            label="Messages"
+            href="#/messages"
+            class="py-1 tall-xs:p-2"
+          >
             <svelte:fragment slot="icon">
               <PaperAirplane
                 tabindex="-1"
@@ -172,7 +176,7 @@
           <SidebarItem
             label="Notifications"
             href="#/notifications"
-            class="mt-1 py-1 tall:p-2"
+            class="mt-1 py-1 tall-xs:p-2"
           >
             <svelte:fragment slot="icon">
               <Bell

ng-app/src/lib/Home.svelte

@@ -44,9 +44,9 @@
       >
         <a href="#/user" class="flex items-center" on:click>
           {#if $online}
-            <Logo class="w-7 h-7 tall:w-10 tall:h-10" />
+            <Logo class="w-7 h-7 tall-xs:w-10 tall-xs:h-10" />
           {:else}
-            <LogoGray class="w-7 h-7 tall:w-10 tall:h-10" />
+            <LogoGray class="w-7 h-7 tall-xs:w-10 tall-xs:h-10" />
           {/if}
           <span
             class="ml-4 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"

ng-app/src/lib/Login.svelte

@@ -312,14 +312,11 @@
 </script>
 
 <div
-  class="flex flex-col justify-center h-screen p-4"
-  class:min-w-[310px]={mobile}
-  class:min-w-[500px]={!mobile}
-  class:max-w-[370px]={mobile}
-  class:max-w-[600px]={!mobile}
+  class="flex flex-col justify-center md:max-w-2xl p-4 sm:px-8"
+  class:h-screen={step !== "load"}
 >
   {#if step == "load"}
-    <div class="flex flex-col justify-center p-4">
+    <div class="flex flex-col justify-center p-4 pt-6">
       <h2 class="pb-5 text-xl self-start">How to open your wallet:</h2>
       <h3 class="pb-2 text-lg self-start">By your Pazzle</h3>
       <ul class="mb-8 ml-3 space-y-4 text-left list-decimal">
@@ -446,7 +443,13 @@
     </div>
     <!-- The following steps have navigation buttons and fixed layout -->
   {:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"}
-    <div class="flex flex-col justify-center h-screen p-4">
+    <div
+      class="flex flex-col justify-center h-screen p-4"
+      class:min-w-[310px]={mobile}
+      class:min-w-[500px]={!mobile}
+      class:max-w-[370px]={mobile}
+      class:max-w-[600px]={!mobile}
+    >
       <div class="mt-auto flex flex-col justify-center">
         <!-- Unlock Screens -->
 
@@ -591,14 +594,14 @@
       <div class="flex justify-between mt-auto">
         <button
           on:click={cancel}
-          class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+          class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
           ><XCircle
             tabindex="-1"
             class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
           />Cancel</button
         >
         <button
-          class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+          class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
           on:click={go_back}
           ><Backspace
             tabindex="-1"

ng-app/src/routes/User.svelte

@@ -10,6 +10,7 @@
 -->
 
 <!--
+  @component  
   "User Panel" page.
   Provides wallet download, logout, offline/online switch, and other user actions.
 -->

ng-app/src/routes/WalletCreate.svelte

@@ -1676,17 +1676,15 @@
               >
                 {#each pazzle_emojis as emoji, index}
                   <div
-                    class="flex items-center w-full py-1 px-2"
+                    class="flex w-full p-1 tall-sm:p-2"
                     class:border-b={index !== pazzle_emojis.length - 1}
                     class:justify-center={!small_screen}
                   >
-                    <div class="w-[10em] font-bold text-left">
-                      <span>{index + 1}</span>: <span>{emoji.cat}</span>
+                    <div class="mr-4 content-center pt-1">
+                      {index + 1}
                     </div>
                     <div
-                      class="flex justify-center items-center"
-                      class:w-[3em]={!small_screen}
-                      class:w-[1.8em]={small_screen}
+                      class="flex justify-center w-[2em] tall-sm:w-[2.5em] tall-md:w-[4em]"
                       title={emoji.code}
                     >
                       <svelte:component
@@ -1694,8 +1692,13 @@
                         class="text-5xl"
                       />
                     </div>
-                    <div class="ml-2 w-[6em] font-bold text-left">
-                      {emoji.code}
+                    <div class="flex flex-col ml-4">
+                      <div class="w-[10em] text-left">
+                        <span>{emoji.cat}</span>
+                      </div>
+                      <div class="font-bold text-lg h-full content-center">
+                        <span>{emoji.code}</span>
+                      </div>
                     </div>
                   </div>
                 {/each}
@@ -1717,16 +1720,18 @@
               The pazzle is easier to remember. The mnemonic is useful in some special
               cases. We recommend that you use the pazzle.
 
-              <em class="font-bold">Copy both on a piece of paper.</em> You
-              should try to memorize the pazzle. Once you did, you won't need
+              <span class="font-bold text-xl"
+                >Copy both on a piece of paper.</span
+              >
+              You should try to memorize the pazzle. Once you did, you won't need
               the paper anymore.
 
               <br /><br />
               Now click on "Continue to Login" and select your new wallet.
               <br />
-              It is important that you <em class="font-bold">login</em> with
+              It is important that you <span class="font-bold">login</span> with
               this wallet
-              <em class="font-bold">at least once</em>
+              <span class="font-bold">at least once</span>
               from this {#if tauri_platform}device{:else}browser tab{/if},<br />
               while connected to the internet, so your personal site can be created
               on your broker.<br /><br />
@@ -1760,8 +1765,11 @@
                 bind:open={confirm_modal_open}
                 title="Did you write down your login credentials?"
               >
-                The pazzle and the mnemonic will not be shown to you again.
-                Please make sure, you have written it down.
+                <span class="text-lg text-neutral-950">
+                  The pazzle and the mnemonic <span class="font-bold">
+                    will not be shown to you again</span
+                  >. Please make sure, you have written it down.
+                </span>
                 <div>
                   <button
                     class="m-2"

ng-app/tailwind.config.cjs

@@ -16,7 +16,15 @@ const config = {
       'xxs': '400px',
       'xs': '500px',
       ...defaultTheme.screens,
+      
       'tall': { 'raw': '(min-height: 450px)' },
+      'tall-xxs': { 'raw': '(min-height: 360px)' },
+      'tall-xs': { 'raw': '(min-height: 480px)' },
+      'tall-sm': { 'raw': '(min-height: 640px)' },
+      'tall-md': { 'raw': '(min-height: 800px)' },
+      'tall-l': { 'raw': '(min-height: 1000px)' },
+      'tall-xl': { 'raw': '(min-height: 1200px)' },
+      'tall-xxl': { 'raw': '(min-height: 1400px)' },
     },
   },