UI enhancement

css/main.css

@@ -874,6 +874,8 @@ ol li::before {
   grid-template-columns: auto 1fr;
   gap: 0.5rem 1rem;
   align-items: center;
+  content-visibility: auto;
+  contain-intrinsic-height: 8rem;
 }
 .transaction:not(:last-of-type) {
   padding-bottom: 2rem;

css/main.scss

@@ -602,17 +602,17 @@ ol {
 #main_header {
   padding: 1.5rem max(1rem, 4vw);
 }
-.app-brand{
+.app-brand {
   display: flex;
   gap: 0.3rem;
   align-items: center;
-  .icon{
+  .icon {
     height: 1.7rem;
     width: 1.7rem;
   }
 }
-.app-name{
-  &__company{
+.app-name {
+  &__company {
     font-size: 0.8rem;
     font-weight: 500;
     color: rgba(var(--text-color), 0.8);
@@ -809,6 +809,8 @@ ol {
   grid-template-columns: auto 1fr;
   gap: 0.5rem 1rem;
   align-items: center;
+  content-visibility: auto;
+  contain-intrinsic-height: 8rem;
   &:not(:last-of-type) {
     padding-bottom: 2rem;
   }

index.html

@@ -111,7 +111,7 @@
                             <output id="address_balance" class="amount-shown"></output>
                         </div>
                         <div class="flex align-center space-between margin-bottom-1 sticky top-0"
-                            style="background-color: rgba(var(--foreground-color), 1);">
+                            style="background-color: rgba(var(--foreground-color), 1); z-index: 2">
                             <h5>Transactions</h5>
                             <sm-chips id="filter_selector">
                                 <sm-chip value="all" selected>All</sm-chip>
@@ -1930,6 +1930,7 @@
                 } catch (e) {
                     console.error(e)
                 }
+                console.log(inputs)
                 renderElem(getRef('increase_fee_popup_content'), html`
                     <sm-form style="--gap: 2rem">
                         <div class="grid gap-0-5">