global: snap

website/scripts/panes/explorer.js

@@ -180,21 +180,31 @@ function renderDetails(block) {
       ["Pool", extras.pool.name],
       ["Pool ID", extras.pool.id.toString()],
       ["Pool Slug", extras.pool.slug],
-      ["Miner Names", extras.pool.minerNames || "N/A"],
+      ["Miner Names", extras.pool.minerNames?.join(", ") || "N/A"],
       ["Reward", `${(extras.reward / 1e8).toFixed(8)} BTC`],
       ["Total Fees", `${(extras.totalFees / 1e8).toFixed(8)} BTC`],
       ["Median Fee Rate", `${formatFeeRate(extras.medianFee)} sat/vB`],
       ["Avg Fee Rate", `${formatFeeRate(extras.avgFeeRate)} sat/vB`],
       ["Avg Fee", `${extras.avgFee.toLocaleString()} sat`],
       ["Median Fee", `${extras.medianFeeAmt.toLocaleString()} sat`],
-      ["Fee Range", extras.feeRange.map((f) => formatFeeRate(f)).join(", ") + " sat/vB"],
-      ["Fee Percentiles", extras.feePercentiles.map((f) => f.toLocaleString()).join(", ") + " sat"],
+      [
+        "Fee Range",
+        extras.feeRange.map((f) => formatFeeRate(f)).join(", ") + " sat/vB",
+      ],
+      [
+        "Fee Percentiles",
+        extras.feePercentiles.map((f) => f.toLocaleString()).join(", ") +
+          " sat",
+      ],
       ["Avg Tx Size", `${extras.avgTxSize.toLocaleString()} B`],
       ["Virtual Size", `${extras.virtualSize.toLocaleString()} vB`],
       ["Inputs", extras.totalInputs.toLocaleString()],
       ["Outputs", extras.totalOutputs.toLocaleString()],
       ["Total Input Amount", `${(extras.totalInputAmt / 1e8).toFixed(8)} BTC`],
-      ["Total Output Amount", `${(extras.totalOutputAmt / 1e8).toFixed(8)} BTC`],
+      [
+        "Total Output Amount",
+        `${(extras.totalOutputAmt / 1e8).toFixed(8)} BTC`,
+      ],
       ["UTXO Set Change", extras.utxoSetChange.toLocaleString()],
       ["UTXO Set Size", extras.utxoSetSize.toLocaleString()],
       ["SegWit Txs", extras.segwitTotalTxs.toLocaleString()],

website/styles/elements.css

@@ -47,7 +47,7 @@ a {
 }
 
 aside {
-  /*min-width: 0;*/
+  min-width: 0;
   position: relative;
   /*height: 100%;*/
   /*width: 100%;*/

website/styles/main.css

@@ -25,7 +25,7 @@ main {
 
   &::after {
     bottom: 0;
-    height: 21rem;
+    height: 16rem;
     background-image: linear-gradient(
       to bottom,
       transparent,

website/styles/panes/explorer.css

@@ -4,26 +4,81 @@
   display: flex;
   overflow: hidden;
 
+  @media (max-width: 767px) {
+    overflow-y: auto;
+    padding: var(--main-padding) 0;
+    flex-direction: column;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: var(--main-padding);
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    &::before {
+      left: 0;
+      background-image: linear-gradient(
+        to left,
+        transparent,
+        var(--background-color)
+      );
+    }
+
+    &::after {
+      right: 0;
+      background-image: linear-gradient(
+        to right,
+        transparent,
+        var(--background-color)
+      );
+    }
+  }
+
   --cube: 4.5rem;
 
   > * {
-    padding: var(--main-padding);
+    padding: 0 var(--main-padding);
+
+    @media (min-width: 768px) {
+      padding: var(--main-padding);
+    }
   }
 
   #chain {
     flex-shrink: 0;
-    height: 100%;
-    overflow-y: auto;
+
+    @media (max-width: 767px) {
+      overflow-x: auto;
+    }
+
+    @media (min-width: 768px) {
+      height: 100%;
+      overflow-y: auto;
+    }
 
     .blocks {
       display: flex;
       flex-direction: column-reverse;
-      gap: calc(var(--cube) * 0.75);
+      --gap: 0.75;
+      gap: calc(var(--cube) * var(--gap));
       margin-right: var(--cube);
       margin-top: calc(var(--cube) * -0.25);
+
+      @media (max-width: 767px) {
+        --gap: 1.25;
+        flex-direction: row-reverse;
+        height: 11.5rem;
+        width: max-content;
+      }
     }
 
     .cube {
+      margin-top: -0.375rem;
       margin-left: calc(var(--cube) * -0.25);
       flex-shrink: 0;
       position: relative;
@@ -126,10 +181,13 @@
 
   #block-details {
     flex: 1;
-    overflow-y: auto;
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
 
+    @media (min-width: 768px) {
+      overflow-y: auto;
+    }
+
     h1 {
       margin-bottom: 1rem;