fix(widget): viewport height responsiveness (#434)

Author: DarianM

components/src/widget/views/interaction/interaction.css

@@ -1,8 +1,7 @@
 :host {
   display: flex;
   flex-direction: column;
-  flex: 1 1 0%;
-  min-height: 0;
+  flex: 1 1 auto;
   --wm-button-radius: 8px;
   font-family: var(--wm-font-family, system-ui, sans-serif);
 }
@@ -42,12 +41,12 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  margin-top: var(--Spacings-lg, 24px);
+  justify-content: center;
+  flex: 1;
 }
 
 .interaction-body img {
-  margin-top: var(--Spacings-2xl, 32px);
+  margin-top: var(--Spacings-lg, 24px);
 }
 
 .title {
@@ -89,7 +88,7 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-  margin-top: auto;
+  margin-top: var(--Spacings-lg, 24px);
   cursor: pointer;
 }
 

components/src/widget/views/interaction/interaction.ts

@@ -249,8 +249,8 @@ export class PaymentInteraction extends LitElement {
           </div>
           <img
             src=${loadingIcon}
-            width="122px"
-            height="200px"
+            width="122"
+            height="200"
             alt="Payment authorization in progress"
           />
         </div>
@@ -274,8 +274,8 @@ export class PaymentInteraction extends LitElement {
           </div>
           <img
             src=${successIcon}
-            width="122px"
-            height="200px"
+            width="122"
+            height="200"
             alt="Payment successful"
           />
         </div>
@@ -296,8 +296,8 @@ export class PaymentInteraction extends LitElement {
           <div class="title failed">${this.errorMessage}</div>
           <img
             src=${failedIcon}
-            width="122px"
-            height="200px"
+            width="122"
+            height="200"
             alt="Payment failed"
           />
         </div>

components/src/widget/widget.css

@@ -50,6 +50,10 @@
 
   --wm-widget-trigger-bg-color: #f3f4f6;
   --wm-button-text-color: var(--Colors-white);
+
+  --trigger-button-height: 3.5rem;
+  --trigger-button-width: 3.5rem;
+  --top-edge-margin: 6.25rem;
 }
 
 button,
@@ -110,11 +114,14 @@ a:focus-visible {
   visibility: visible;
   width: 340px;
   height: 606px;
+  max-height: calc(
+    100vh - var(--trigger-button-height) - var(--top-edge-margin)
+  );
+  overflow-y: auto;
   transition:
     opacity 0.25s ease-out,
     transform 0.25s ease-out,
     visibility 0s linear 0s;
-  overflow: auto;
 }
 
 .content.closed {
@@ -131,8 +138,8 @@ a:focus-visible {
 .trigger {
   cursor: pointer;
   background: var(--wm-widget-trigger-bg-color);
-  width: 3.5rem;
-  height: 3.5rem;
+  width: var(--trigger-button-width);
+  height: var(--trigger-button-height);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -295,6 +302,12 @@ a:focus-visible {
   align-self: stretch;
 }
 
+.divider {
+  width: 100%;
+  height: 1px;
+  margin: var(--Spacings-lg, 24px) 0;
+}
+
 .form-label {
   display: flex;
   justify-content: flex-start;
@@ -463,7 +476,7 @@ a:focus-visible {
   }
 }
 
-@media (max-width: 480px), (max-height: 768px) {
+@media (max-width: 480px) {
   .content.open:not(.preview-mode) {
     position: fixed;
     top: 0;
@@ -475,7 +488,7 @@ a:focus-visible {
   }
 }
 
-@container (max-width: 320px) {
+@container (max-width: 340px) {
   .content.open.preview-mode {
     position: absolute;
     inset: 0;

components/src/widget/widget.ts

@@ -151,7 +151,7 @@ export class PaymentWidget extends LitElement {
     const showDescription = this.config.isWidgetDescriptionVisible ?? true
     const descriptionElement = showDescription
       ? html`<p>${description}</p>`
-      : null
+      : html`<div class="divider" />`
 
     return html`
       <div class="widget-header-container">