jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-11 22:01:07 -04:00
Code Issues Projects Releases Wiki Activity

fix(UI):Donation Modal "Edit Amount" Overflow (#52407)

Browse Source 
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
This commit is contained in:
dean glükler
2023-12-06 17:29:42 +00:00
committed by GitHub
parent 03c04d5c1f
commit 20afbfd601
2 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/components/Donation/donate-form.tsx
View File

@@ -217,9 +217,11 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
const confirmationWithEditAmount = (
<>
{t('donate.confirm-multitier', {
usd: formattedAmountLabel(donationAmount)
})}
<b>
{t('donate.confirm-multitier', {
usd: formattedAmountLabel(donationAmount)
})}
</b>
<button
type='button'
@@ -238,7 +240,7 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
};
return (
<>
<b className={confirmationClass()}>{confirmationWithEditAmount}</b>
<div className={confirmationClass()}>{confirmationWithEditAmount}</div>
<Spacer size={editAmount ? 'small' : 'medium'} />
<fieldset
data-playwright-test-label='donation-form'

16
client/src/components/Donation/donation.css
View File

@@ -95,7 +95,7 @@
@media (min-width: 1200px) {
/*
This style allows multi columns in the same row.
It will become a functionality once the Grid system is updated.
It will become a functionality once the Grid system is updated.
*/
.donate-page-wrapper > div > div {
float: left;
@@ -298,14 +298,18 @@ li.disabled > a {
}
.edit-amount-confirmation {
width: 350px !important;
margin: 0 auto;
display: flex !important;
max-width: 350px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
& > * {
flex: 0 0 max-content;
}
}
/*
/*
* We currently cannot reuse the Button component from `ui-components`
* and are using the native `<button>` with custom CSS.
* This implementation is temporary until we can find a solution for this button use case.
@@ -528,7 +532,7 @@ a.patreon-button:hover {
display: none;
}
/*
/*
* We currently cannot reuse the Button component from `ui-components`
* and are using the native `<button>` with custom CSS.
* This implementation is temporary until we can find a solution for this button use case.
@@ -646,7 +650,7 @@ a.patreon-button:hover {
margin-bottom: 2px;
}
/*
/*
* We currently cannot reuse the Button component from `ui-components`
* and are using the native `<button>` with custom CSS.
* This implementation is temporary until we can find a solution for this button use case.