From 5fb059d168f7543c41f1acdffbca37414defc6c0 Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Sun, 6 Aug 2023 19:28:20 +0300
Subject: [PATCH] fix size of login component on mobile devices

---
 ng-app/README.md                      |  2 +-
 ng-app/src/lib/Login.svelte           | 15 +++++++++++++--
 ng-app/src/routes/WalletCreate.svelte |  1 -
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ng-app/README.md b/ng-app/README.md
index b7b3309..4d9688a 100644
--- a/ng-app/README.md
+++ b/ng-app/README.md
@@ -69,7 +69,7 @@ cargo tauri dev --target x86_64-pc-windows-msvc
 
 to build the production app installer :
 
-### MacOs
+### MacOs (10.14+)
 
 ```
 cargo tauri build
diff --git a/ng-app/src/lib/Login.svelte b/ng-app/src/lib/Login.svelte
index 7208027..b0d320a 100644
--- a/ng-app/src/lib/Login.svelte
+++ b/ng-app/src/lib/Login.svelte
@@ -16,6 +16,9 @@
   import { emoji_cat, emojis, load_svg } from "../wallet_emojis";
   export let wallet;
 
+  let tauri_platform = import.meta.env.TAURI_PLATFORM;
+  let mobile = tauri_platform == "android" || tauri_platform == "ios";
+
   const dispatch = createEventDispatcher();
 
   onMount(async () => {
@@ -191,7 +194,11 @@
     </svg>
   </div>
 {:else if step == "pazzle"}
-  <div class="h-screen aspect-[3/5] pazzleline max-w-[600px] min-w-[350px]">
+  <div
+    class="h-screen aspect-[3/5] pazzleline min-w-[350px]"
+    class:max-w-[360px]={mobile}
+    class:max-w-[600px]={!mobile}
+  >
     {#each [0, 1, 2, 3, 4] as row}
       <div class="columns-3 gap-0">
         {#each emojis2[display]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
@@ -210,7 +217,11 @@
   </div>
 {:else if step == "order"}
   <!-- console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code); -->
-  <div class="h-screen aspect-[3/3] pazzleline max-w-[600px] min-w-[350px]">
+  <div
+    class="h-screen aspect-[3/3] pazzleline min-w-[350px]"
+    class:max-w-[360px]={mobile}
+    class:max-w-[600px]={!mobile}
+  >
     {#each [0, 1, 2] as row}
       <div class="columns-3 gap-0">
         {#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
diff --git a/ng-app/src/routes/WalletCreate.svelte b/ng-app/src/routes/WalletCreate.svelte
index cdd81af..91ca879 100644
--- a/ng-app/src/routes/WalletCreate.svelte
+++ b/ng-app/src/routes/WalletCreate.svelte
@@ -34,7 +34,6 @@
   const param = new URLSearchParams($querystring);
 
   let tauri_platform = import.meta.env.TAURI_PLATFORM;
-
   let mobile = tauri_platform == "android" || tauri_platform == "ios";
 
   const onFileSelected = (image) => {