From 6f25555d1c40e59ba3cefe1996da3a03de19eed0 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 11 Feb 2024 16:54:00 +0200
Subject: [PATCH 1/3] fix card width

---
 .../src/weblets/profile_manager.vue           | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index 3cd58dd7a1..1c7bb4f0e0 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -1,10 +1,5 @@
 <template>
-  <VDialog
-    scrollable
-    width="60%"
-    :model-value="$props.modelValue"
-    @update:model-value="$emit('update:model-value', $event)"
-  >
+  <VDialog width="1024" :model-value="$props.modelValue" @update:model-value="$emit('update:model-value', $event)">
     <template #activator="{ props }">
       <VCard v-bind="props" class="pa-3 d-inline-flex align-center">
         <VProgressCircular v-if="activating" class="mr-2" indeterminate color="primary" size="25" />
@@ -131,7 +126,9 @@
                           ) {
                             return;
                           }
-                          return { message: 'Mnemonic or Hex Seed doesn\'t seem to be valid.' };
+                          return {
+                            message: 'Mnemonic or Hex Seed doesn\'t seem to be valid.',
+                          };
                         },
                       ]"
                       :async-rules="[validateMnInput]"
@@ -148,7 +145,10 @@
                               label="Mnemonic or Hex Seed"
                               placeholder="Please insert your Mnemonic or Hex Seed"
                               v-model="mnemonic"
-                              v-bind="{ ...passwordInputProps, ...validationProps }"
+                              v-bind="{
+                                ...passwordInputProps,
+                                ...validationProps,
+                              }"
                               :disabled="creatingAccount || activatingAccount || activating"
                               @click:append="reloadValidation"
                             />
@@ -283,7 +283,10 @@
                   <VTextField
                     label="Confirm Password"
                     v-model="confirmPassword"
-                    v-bind="{ ...confirmPasswordInputProps, ...validationProps }"
+                    v-bind="{
+                      ...confirmPasswordInputProps,
+                      ...validationProps,
+                    }"
                     :disabled="creatingAccount || activatingAccount || activating"
                   />
                 </InputValidator>
@@ -316,8 +319,8 @@
       </DTabs>
 
       <template v-if="profileManager.profile">
-        <v-row class="justify-space-around py-2 pb-5">
-          <v-col cols="7" sm="12" md="12" lg="7">
+        <v-row>
+          <v-col cols="12" sm="6">
             <PasswordInputWrapper #="{ props }">
               <VTextField
                 :label="profileManager.profile.mnemonic.startsWith('0x') ? 'Your Hex Seed' : 'Your Mnemonic'"
@@ -336,9 +339,9 @@
               <VTextField label="Address" readonly v-model="profileManager.profile.address" v-bind="props" />
             </CopyInputWrapper>
           </v-col>
-          <v-divider class="mx-4" vertical></v-divider>
+          <v-divider class="hidden-sm-and-down" vertical></v-divider>
 
-          <v-col cols="12" lg="4">
+          <v-col cols="12" sm="6">
             <section class="d-flex flex-column align-center">
               <p class="mb-4 text-center">
                 Scan the QR code using

From c9e0a4ce217659c0193c1e67ec0320355720f6cd Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 12 Feb 2024 16:09:07 +0200
Subject: [PATCH 2/3] fix keypair input in small screens

---
 packages/playground/src/weblets/profile_manager.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index 57e910d28d..fc33799fc0 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -1,5 +1,10 @@
 <template>
-  <VDialog width="1024" :model-value="$props.modelValue" @update:model-value="$emit('update:model-value', $event)">
+  <VDialog
+    width="1024"
+    class="mx-auto"
+    :model-value="$props.modelValue"
+    @update:model-value="$emit('update:model-value', $event)"
+  >
     <template #activator="{ props }">
       <VCard v-bind="props" class="pa-3 d-inline-flex align-center">
         <VProgressCircular v-if="activating" class="mr-2" indeterminate color="primary" size="25" />
@@ -138,7 +143,7 @@
                       :disable-validation="creatingAccount || activatingAccount || activating"
                     >
                       <v-row>
-                        <v-col cols="10">
+                        <v-col cols="12" md="9">
                           <div v-bind="tooltipProps">
                             <VTextField
                               :append-icon="!enableReload && !activatingAccount && mnemonic !== '' ? 'mdi-reload' : ''"
@@ -168,7 +173,7 @@
                             >
                           </div>
                         </v-col>
-                        <v-col cols="2">
+                        <v-col cols="12" md="3">
                           <v-tooltip
                             location="top"
                             text="Using different keypair types will lead to a completely different account."

From ac05b99ccae1743767e3927273e86c7879b447f5 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 14 Feb 2024 14:09:57 +0200
Subject: [PATCH 3/3] update classes to fit small screens

---
 packages/playground/src/weblets/profile_manager.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index fc33799fc0..d4fde47f75 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -192,7 +192,7 @@
                         </v-col>
                       </v-row>
 
-                      <div class="d-flex justify-end mb-10">
+                      <div class="d-flex flex-column flex-md-row justify-end mb-10">
                         <v-tooltip>
                           <template v-slot:activator="{ isActive, props }">
                             <VBtn
@@ -832,4 +832,11 @@ export default {
     width: 8rem !important;
   }
 }
+
+@media only screen and (max-width: 600px) {
+  html,
+  .v-btn {
+    font-size: 0.875rem !important;
+  }
+}
 </style>