tweak: Improve .content to avoid wasted margins and special casing

radixdlt · Dec 20, 2024 · fa9bdac · fa9bdac
1 parent e2f9b32
commit fa9bdac
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 20 deletions.
diff --git a/packages/connect-button/src/components/pages/requests.ts b/packages/connect-button/src/components/pages/requests.ts
@@ -45,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;
-        }
-      }
     `,
   ]
 }

diff --git a/packages/connect-button/src/components/pages/sharing.ts b/packages/connect-button/src/components/pages/sharing.ts
@@ -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;
       }
 

diff --git a/packages/connect-button/src/components/pages/styles.ts b/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);
   }
 `