enhancement: making the evm swap section look decent on mobile

greymass · Jul 26, 2023 · f6e9e85 · f6e9e85
1 parent 66c3725
commit f6e9e85
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/src/pages/evm/swap/confirm.svelte b/src/pages/evm/swap/confirm.svelte
@@ -50,6 +50,22 @@
             max-width: 300px;
             margin: auto;
         }
+
+         /* Media Query for Mobile */
+        @media screen and (max-width: 768px) {
+            padding: 1em;
+
+            table {
+                tr {
+                    flex-direction: column;
+                    align-items: start;
+                }
+            }
+
+            .bottom-section {
+                max-width: 100%;
+            }
+        }
     }
 </style>
 
@@ -61,11 +77,11 @@
 
     <table>
         <tr>
-            <td>From {from}</td>
+            <td>From {from.name}</td>
             <td>{from?.name === 'EOS (EVM)' ? $evmAccount?.address : $activeSession?.auth.actor}</td>
         </tr>
         <tr>
-            <td>To {to}</td>
+            <td>To {to.name}</td>
             <td>{from?.name === 'EOS' ? $evmAccount?.address : $activeSession?.auth.actor}</td>
         </tr>
         <tr>

diff --git a/src/pages/evm/swap/form.svelte b/src/pages/evm/swap/form.svelte
@@ -127,6 +127,17 @@
                     margin-bottom: 15px;
                 }
             }
+
+             /* Media Query for Mobile */
+            @media screen and (max-width: 768px) {
+                flex-direction: column;
+
+                .left-section,
+                .right-section {
+                    width: 90%; /* Adjust width for mobile */
+                    margin: 3% auto; /* Centers the sections */
+                }
+            }
         }
 
         .bottom-section {

diff --git a/src/pages/evm/swap/success.svelte b/src/pages/evm/swap/success.svelte
@@ -48,6 +48,41 @@
             justify-content: center;
             gap: 1em;
         }
+
+         /* Media Query for Mobile */
+        @media screen and (max-width: 768px) {
+            padding: 1em;
+
+            table {
+                width: 300px;
+                margin: auto;
+
+                tr:first-child td {
+                    border: none;
+                }
+
+                tr {
+                    display: flex;
+                    flex-direction: column;
+                }
+
+                tr td {
+                    border: none;
+                    word-wrap: break-word;
+                    width: 300px;
+                }
+
+                tr td:last-child {
+                    padding-top: 0;
+                    margin-bottom: 20px;
+                }
+            }
+
+            .bottom-section {
+                flex-direction: column;
+                align-items: center;
+            }
+        }
     }
 </style>
 
@@ -61,7 +96,7 @@
 
         <table>
             <tr>
-                <td>Transaction ID</td>
+                <td>Transaction ID:</td>
                 <td>{evmTransactResult?.hash}</td>
             </tr>
         </table>