Auto collapsing transaction details when scrolling

css/main.css

@@ -1797,6 +1797,18 @@ sm-chip .badge {
   -webkit-backdrop-filter: blur(1rem);
           backdrop-filter: blur(1rem);
   box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.1);
+  view-transition-name: transaction-details;
+  padding: 1rem;
+  border-radius: 0.85rem;
+}
+#transaction_details[open] {
+  padding: 1.5rem;
+}
+
+::view-transition-new(transaction-details),
+::view-transition-old(transaction-details) {
+  width: 100%;
+  height: 100%;
 }
 
 .message {

css/main.scss

@@ -1843,6 +1843,17 @@ sm-chip {
   margin: 1.5rem auto;
   backdrop-filter: blur(1rem);
   box-shadow: 0 1rem 1.5rem rgba(0 0 0 / 0.1);
+  view-transition-name: transaction-details;
+  padding: 1rem;
+  border-radius: 0.85rem;
+  &[open] {
+    padding: 1.5rem;
+  }
+}
+::view-transition-new(transaction-details),
+::view-transition-old(transaction-details) {
+  width: 100%;
+  height: 100%;
 }
 
 .message {

index.html

@@ -4154,7 +4154,7 @@
                                     }
                                 }
                                 getRef('messages_container').prepend(html.node`
-                                        <details id="transaction_details" class="grid gap-1 card" open>
+                                        <details id="transaction_details" class="grid gap-1" open>
                                             <summary>
                                                 ${pendingSigns === 0 ? html`
                                                     <h4>Required signatures are done</h4>
@@ -4190,6 +4190,20 @@
                                             ${retrySection}
                                         </details>
                                     `)
+                                let scrollStart
+                                const scrollCallback = (e) => {
+                                    if (!scrollStart)
+                                        scrollStart = e.target.scrollTop
+                                    if (Math.abs(scrollStart - e.target.scrollTop) < 100) return
+                                    if (document.startViewTransition)
+                                        document.startViewTransition(() => {
+                                            getRef('transaction_details').open = false;
+                                        })
+                                    else
+                                        getRef('transaction_details').open = false;
+                                    getRef('messages_container').removeEventListener('scroll', scrollCallback)
+                                }
+                                getRef('messages_container').addEventListener('scroll', scrollCallback)
                             } catch (err) {
                                 notify(err, 'error')
                             }