optimise responsiveness on create wallets page

michielpost · May 14, 2024 · 3db77e2 · 3db77e2
1 parent 3b48522
commit 3db77e2
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/aoWebWallet/Shared/AddUploadWalletComponent.razor b/src/aoWebWallet/Shared/AddUploadWalletComponent.razor
@@ -20,7 +20,7 @@
                                @ondragleave="@ClearDragClass"
                                @ondragend="@ClearDragClass">
                     <ButtonTemplate>
-                        <MudPaper Height="150px"
+                        <MudPaper Height="100%"
                                   Outlined="true"
                                   Class="@_dragClass">
                             <MudText Typo="Typo.h6">

diff --git a/src/aoWebWallet/Shared/AddWalletComponent.razor b/src/aoWebWallet/Shared/AddWalletComponent.razor
@@ -1,6 +1,6 @@
 <MudContainer Class="mt-16 px-8" MaxWidth="MaxWidth.ExtraExtraLarge">
     <MudGrid>
-        <MudItem xs="12" md="4">
+        <MudItem xs="12" md="12" lg="4">
             <MudPaper Elevation="2" Class="pa-4 border-radius-25 first-wallet">
                 <div Style="width:100%; display:flex; flex-direction:row; justify-content:center;">
                     <div Class="background-x">
@@ -10,7 +10,7 @@
                 <AddGenerateWalletComponent></AddGenerateWalletComponent>
             </MudPaper>
         </MudItem>
-        <MudItem xs="12" md="4">
+        <MudItem xs="12" md="12" lg="4">
             <MudPaper Elevation="2" Class="pa-4 border-radius-25 first-wallet">
                 <div Style="width:100%; display:flex; flex-direction:row; justify-content:center;">
                     <div Class="background-x">
@@ -20,7 +20,7 @@
                 <AddArConnectComponent></AddArConnectComponent>
             </MudPaper>
         </MudItem>
-        <MudItem xs="12" md="4">
+        <MudItem xs="12" md="12" lg="4">
             <MudPaper Elevation="2" Class="pa-4 border-radius-25 first-wallet-upload">
                 <div Style="width:100%; display:flex; flex-direction:row; justify-content:center;">
                     <div Class="background-x">

diff --git a/src/aoWebWallet/wwwroot/css/app.css b/src/aoWebWallet/wwwroot/css/app.css
@@ -281,14 +281,15 @@ button.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.copy-clipboard
 .mud-paper.first-wallet {
     background: rgb(48,20,82);
     background: linear-gradient(180deg, rgba(48,20,82,1) 0%, rgba(69,20,84,1) 100%);
-    height: 333px;
+    height: auto;
+    min-height: 333px;
 
 }
 
 .mud-paper.first-wallet-upload {
     background: rgb(48,20,82);
     background: linear-gradient(180deg, rgba(48,20,82,1) 0%, rgba(69,20,84,1) 100%);
-    height: 444px;
+    height: auto;
 
 }