2 files changed, 20 insertions, 3 deletions
diff --git a/extension/popup/popup.css b/extension/popup/popup.css
index 20385106e..53c9f97ed 100644
--- a/extension/popup/popup.css
+++ b/extension/popup/popup.css
@@ -2,7 +2,9 @@ body {
     min-height: 20em;
     width: 30em;
     margin: 0;
-    padding: 0
+    padding: 0;
+    max-height: 800px;
+    overflow: hidden;
 }
 
 .nav {
@@ -21,6 +23,16 @@ body {
     font-weight: bold;
 }
 
+
+.container {
+    overflow-y: scroll;
+    max-height: 400px;
+}
+
+.abbrev {
+    text-decoration-style: dotted;
+}
+
 #content {
     padding: 1em;
 }
diff --git a/extension/popup/popup.tsx b/extension/popup/popup.tsx
index 8bfb691ca..a19087b1a 100644
--- a/extension/popup/popup.tsx
+++ b/extension/popup/popup.tsx
@@ -101,13 +101,18 @@ function formatAmount(amount) {
   return `${v.toFixed(2)} ${amount.currency}`;
 }
 
+function abbrevKey(s: string) {
+  return m("span.abbrev", {title: s}, (s.slice(0,5) + ".."))
+}
+
+
 function formatHistoryItem(historyItem) {
   const d = historyItem.detail;
   const t = historyItem.timestamp;
   switch (historyItem.type) {
     case "create-reserve":
       return m("p",
-               i18n`Created reserve of ${formatAmount(d.requestedAmount)} at ${formatTimestamp(
+               i18n.parts`Created reserve (${abbrevKey(d.reservePub)}) of ${formatAmount(d.requestedAmount)} at ${formatTimestamp(
                  t)}`);
     case "withdraw":
       return m("p",
@@ -143,7 +148,7 @@ var WalletHistory = {
     }
     let listing = _.map(history, formatHistoryItem);
     if (listing.length > 0) {
-      return listing;
+      return m("div.container", listing);
     }
     return i18n`Your wallet has no events recorded.`;
   }