minor UI fixes

docs/css/main.css

@@ -215,6 +215,18 @@ ul {
   display: flex;
 }
 
+.flex-1 {
+  flex: 1;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.direction-column {
+  flex-direction: column;
+}
+
 .grid {
   display: grid;
 }
@@ -295,10 +307,6 @@ ul {
   justify-self: end;
 }
 
-.direction-column {
-  flex-direction: column;
-}
-
 .space-between {
   justify-content: space-between;
 }
@@ -415,12 +423,12 @@ ul {
   width: 100%;
   padding: 0 1.5rem;
   align-items: center;
+  justify-items: flex-start;
 }
 
 .popup__header__close {
   padding: 0.5rem;
-  margin-left: -0.7rem;
-  cursor: pointer;
+  margin-left: -0.5rem;
 }
 
 #main_page {
@@ -874,6 +882,10 @@ sm-checkbox {
   margin-left: 0.3rem;
 }
 
+.transaction-card,
+.live-order {
+  gap: 0 1rem;
+}
 .transaction-card__type,
 .live-order__type {
   font-size: 0.9rem;
@@ -910,6 +922,10 @@ sm-checkbox {
   font-size: 0.9rem;
   color: rgba(var(--text-color), 0.9);
 }
+.transaction-card .more-info,
+.live-order .more-info {
+  padding: 0.3rem;
+}
 
 .transaction-card {
   content-visibility: auto;
@@ -1241,6 +1257,7 @@ sm-checkbox {
   }
 
   .popup__header {
+    grid-column: 1/-1;
     padding: 1rem 1.5rem 0 1.5rem;
   }
 

docs/css/main.scss

@@ -203,6 +203,15 @@ ul {
 .flex {
   display: flex;
 }
+.flex-1 {
+  flex: 1;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.direction-column {
+  flex-direction: column;
+}
 
 .grid {
   display: grid;
@@ -283,10 +292,6 @@ ul {
   justify-self: end;
 }
 
-.direction-column {
-  flex-direction: column;
-}
-
 .space-between {
   justify-content: space-between;
 }
@@ -394,12 +399,12 @@ ul {
   width: 100%;
   padding: 0 1.5rem;
   align-items: center;
+  justify-items: flex-start;
 }
 
 .popup__header__close {
   padding: 0.5rem;
-  margin-left: -0.7rem;
-  cursor: pointer;
+  margin-left: -0.5rem;
 }
 
 #main_page {
@@ -830,6 +835,7 @@ sm-checkbox {
 
 .transaction-card,
 .live-order {
+  gap: 0 1rem;
   &__type {
     font-size: 0.9rem;
     font-weight: 500;
@@ -853,6 +859,9 @@ sm-checkbox {
     font-size: 0.9rem;
     color: rgba(var(--text-color), 0.9);
   }
+  .more-info {
+    padding: 0.3rem;
+  }
 }
 .transaction-card {
   content-visibility: auto;
@@ -1133,6 +1142,7 @@ sm-checkbox {
     --width: 24rem;
   }
   .popup__header {
+    grid-column: 1/-1;
     padding: 1rem 1.5rem 0 1.5rem;
   }
   #confirmation_popup {

docs/index.html

@@ -1621,7 +1621,7 @@
                     })
                 } else {
                     getRef('my_orders__title').textContent = 'My trades'
-                    transactions.forEach(transaction => {
+                    transactions.reverse().forEach(transaction => {
                         const { asset, quantity, unitValue, tx_time, buyer, seller } = transaction
                         let type, other;
                         if (seller === proxy.userID) {