Skip to content

fix(widget): viewport height responsiveness #434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DarianM merged 6 commits into from
Oct 27, 2025
Merged

fix(widget): viewport height responsiveness #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
007f79d
widget responsiveness
DarianM Oct 24, 2025
fb25aad
cleanup
DarianM Oct 24, 2025
2d08c18
add divider when description not visible
DarianM Oct 24, 2025
90ee740
have image fixed size
DarianM Oct 24, 2025
f1d049a
use attr
DarianM Oct 27, 2025
f13f08a
use vars better read
DarianM Oct 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions components/src/widget/views/interaction/interaction.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -89,7 +88,7 @@
flex-direction: column;
align-items: center;
width: 100%;
margin-top: auto;
margin-top: var(--Spacings-lg, 24px);
cursor: pointer;
}

Expand Down
12 changes: 6 additions & 6 deletions components/src/widget/views/interaction/interaction.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
23 changes: 18 additions & 5 deletions components/src/widget/widget.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -475,7 +488,7 @@ a:focus-visible {
}
}

@container (max-width: 320px) {
@container (max-width: 340px) {
.content.open.preview-mode {
position: absolute;
inset: 0;
Expand Down
2 changes: 1 addition & 1 deletion components/src/widget/widget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down