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 4 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
13 changes: 7 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,14 @@
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);
height: 200px;
width: 122px;
margin-top: var(--Spacings-lg, 24px);
}

.title {
Expand Down Expand Up @@ -89,7 +90,7 @@
flex-direction: column;
align-items: center;
width: 100%;
margin-top: auto;
margin-top: var(--Spacings-lg, 24px);
cursor: pointer;
}

Expand Down
21 changes: 3 additions & 18 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 @@ -247,12 +247,7 @@ export class PaymentInteraction extends LitElement {
<div class="description">
Please complete the authorization in the opened tab
</div>
<img
src=${loadingIcon}
width="122px"
height="200px"
alt="Payment authorization in progress"
/>
<img src=${loadingIcon} alt="Payment authorization in progress" />
Comment thread
sidvishnoi marked this conversation as resolved.
Outdated
</div>

<button class="button-container empty-button" @click=${this.cancel}>
Expand All @@ -272,12 +267,7 @@ export class PaymentInteraction extends LitElement {
<div class="description">
Your payment has been processed successfully
</div>
<img
src=${successIcon}
width="122px"
height="200px"
alt="Payment successful"
/>
<img src=${successIcon} alt="Payment successful" />
</div>

<button class="button-container primary-button" @click=${this.goBack}>
Expand All @@ -294,12 +284,7 @@ export class PaymentInteraction extends LitElement {

<div class="interaction-body">
<div class="title failed">${this.errorMessage}</div>
<img
src=${failedIcon}
width="122px"
height="200px"
alt="Payment failed"
/>
<img src=${failedIcon} alt="Payment failed" />
</div>

<button class="button-container empty-button" @click=${this.cancel}>
Expand Down
13 changes: 10 additions & 3 deletions components/src/widget/widget.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,12 @@ a:focus-visible {
visibility: visible;
width: 340px;
height: 606px;
max-height: calc(100vh - 140px);
Comment thread
sidvishnoi marked this conversation as resolved.
Outdated
overflow-y: auto;
transition:
opacity 0.25s ease-out,
transform 0.25s ease-out,
visibility 0s linear 0s;
overflow: auto;
}

.content.closed {
Expand Down Expand Up @@ -295,6 +296,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 +470,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 +482,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