tweak: Margins and dapp names

packages/connect-button/src/components/card/request-card.ts

@@ -259,7 +259,6 @@ export class RadixRequestCard extends LitElement {
       :host {
         display: flex;
         width: 100%;
-        margin-bottom: 10px;
       }
 
       .text-dimmed {

packages/connect-button/src/components/card/request-cards.ts

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { themeCSS } from '../../theme'
 import '../card/request-card'
@@ -16,13 +16,23 @@ export class RadixRequestCards extends LitElement {
           type="${requestItem.type}"
           status="${requestItem.status}"
           id="${requestItem.interactionId}"
+          hash="${requestItem.transactionIntentHash || ''}"
           ?showCancel="${requestItem.showCancel}"
           timestamp=${requestItem.createdAt}
         ></radix-request-card>`,
     )
   }
 
-  static styles = [themeCSS]
+  static styles = [
+    themeCSS,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+    `,
+  ]
 }
 
 declare global {

packages/connect-button/src/components/pages/requests.ts

@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import '../card/request-card'
+import '../card/request-cards'
 import { RequestItem } from 'radix-connect-common'
 import { pageStyles } from './styles'
 import { formatTimestamp } from '../../helpers/format-timestamp'
@@ -22,25 +22,15 @@ export class RadixRequestsPage extends LitElement {
 
   render() {
     return html`
-      <div class="header">Connected to ${this.dAppName}</div>
+      <div class="header">Connected to ${this.dAppName || "dApp"}</div>
       <slot name="subheader"></slot>
       ${this.loggedInTimestamp
         ? html`<div class="subheader">
             Since logged in: ${formatTimestamp(this.loggedInTimestamp, ', ')}
           </div>`
         : ''}
       <div class="content">
-        ${(this.requestItems || []).map(
-          (requestItem) =>
-            html`<radix-request-card
-              type="${requestItem.type}"
-              status="${requestItem.status}"
-              id="${requestItem.interactionId}"
-              hash="${requestItem.transactionIntentHash || ''}"
-              ?showCancel="${requestItem.showCancel}"
-              timestamp=${requestItem.createdAt}
-            ></radix-request-card>`,
-        )}
+        <radix-request-cards .requestItems=${this.requestItems}></radix-request-cards>
       </div>
     `
   }
@@ -55,17 +45,6 @@ export class RadixRequestsPage extends LitElement {
         text-align: center;
         font-size: 12px;
       }
-
-      .content {
-        padding-bottom: 25px;
-        max-height: calc(100vh - 270px);
-      }
-
-      @media (min-height: 580px) {
-        .content {
-          max-height: 360px;
-        }
-      }
     `,
   ]
 }

packages/connect-button/src/components/pages/sharing.ts

@@ -59,7 +59,7 @@ export class RadixSharingPage extends LitElement {
   }
 
   render() {
-    return html` <div class="header">Sharing with ${this.dAppName}</div>
+    return html` <div class="header">Sharing with ${this.dAppName || "dApp"}</div>
       <div class="content">
         <radix-persona-card
           avatarUrl=${this.avatarUrl}
@@ -121,19 +121,14 @@ export class RadixSharingPage extends LitElement {
       .icon.disabled::before {
         background: var(--radix-button-disabled-text-color);
       }
-      .content {
-        max-height: 193px;
-        overflow-x: hidden;
-        padding-bottom: 19px;
-      }
       .buttons {
         display: grid;
         bottom: 0;
         width: 100%;
         grid-template-columns: 1fr 115px;
         grid-gap: 10px;
         width: 100%;
-        padding-top: 5px;
+        padding-top: 10px;
         align-items: end;
       }
 

packages/connect-button/src/components/pages/styles.ts

@@ -17,11 +17,19 @@ export const pageStyles = css`
   }
 
   .content {
-    overflow: auto;
     width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
     margin-bottom: 0;
     position: relative;
-    -webkit-mask-image: linear-gradient(180deg, black 90%, transparent 100%);
-    mask-image: linear-gradient(180deg, black 90%, transparent 95%);
+    min-height: 100px;
+    /* Ensure we can't see the mask when fully scrolled to the bottom */
+    padding-bottom: 10px;
+    mask-image: linear-gradient(0deg, transparent 0px, black 10px);
+
+    /* Given .content has overflow: scroll, I feel we shouldn't need
+     * a max-height to constrain the content, but it just doesn't work
+     * So we set it manually to be correct. */
+    max-height: min(calc(100vh - 270px), 360px);
   }
 `