global: opreturn part 4

website_next/explore/block/receipt/index.js

@@ -76,6 +76,7 @@ function createReceiptBrand() {
 /** @param {Block} block */
 function openReceiptDialog(block) {
   const dialog = document.createElement("dialog");
+  const content = document.createElement("main");
   const paper = document.createElement("article");
   const controls = document.createElement("footer");
   const print = document.createElement("button");
@@ -104,14 +105,15 @@ function openReceiptDialog(block) {
     createReceiptQr(block, url),
     createReceiptBrand(),
   );
-  dialog.append(paper, controls);
+  content.append(paper);
+  dialog.append(content, controls);
 
   print.addEventListener("click", () => {
     window.print();
   });
   openDialog(dialog, document.body);
   dialog.focus({ preventScroll: true });
-  dialog.scrollTop = 0;
+  content.scrollTop = 0;
 }
 
 export function createBlockReceipt() {

website_next/explore/block/receipt/style.css

@@ -10,18 +10,25 @@ dialog[data-block-receipt] {
   position: fixed;
   inset: 0 0 auto;
   width: min(100% - 2rem, 28rem);
+  height: 100dvh;
   max-height: 100dvh;
   margin: 0 auto;
   border-radius: 0;
-  overflow-y: auto;
-  padding-block: var(--receipt-dialog-padding-block);
+  overflow: hidden;
+  padding: 0;
   color: var(--black);
   background: transparent;
   font-family: var(--font-mono);
-  overscroll-behavior: contain;
-  scrollbar-width: none;
   translate: none;
 
+  > main {
+    height: 100%;
+    overflow-y: auto;
+    padding-block: var(--receipt-dialog-padding-block);
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+  }
+
   :is(
     [data-receipt-section] > h3,
     [data-receipt-row] > span,
@@ -190,7 +197,7 @@ dialog[data-block-receipt] {
   }
 
   [data-receipt-controls] {
-    position: fixed;
+    position: absolute;
     bottom: 0.5rem;
     left: 50%;
     z-index: 1;
@@ -265,6 +272,7 @@ dialog[data-block-receipt] {
     position: static;
     display: block;
     width: var(--receipt-page-width);
+    height: auto;
     max-width: none;
     max-height: none;
     margin: 0;
@@ -275,6 +283,12 @@ dialog[data-block-receipt] {
     overscroll-behavior: auto;
   }
 
+  dialog[data-block-receipt] > main {
+    height: auto;
+    overflow: visible;
+    padding: 0;
+  }
+
   dialog[data-block-receipt]::backdrop {
     display: none;
   }