fix for in-product survey card height

This commit is contained in:
Jakob Schott
2025-05-19 20:43:02 +02:00
parent fba455c47f
commit 84d4c59532
3 changed files with 20 additions and 15 deletions

View File

@@ -82,7 +82,7 @@
"please_click_the_link_in_the_email_to_activate_your_account": "Please click the link in the email to activate your account.",
"please_confirm_your_email_address": "Please confirm your email address",
"resend_verification_email": "Resend verification email",
"verification_email_successfully_sent": "Verification email successfully sent. Please check your inbox.",
"verification_email_successfully_sent": "Verification email sent to {email}. Please verify to complete the update.",
"we_sent_an_email_to": "We sent an email to {email}. ",
"you_didnt_receive_an_email_or_your_link_expired": "You didn't receive an email or your link expired?"
},

View File

@@ -82,7 +82,7 @@
"please_click_the_link_in_the_email_to_activate_your_account": "Por favor, clique no link no email para ativar a sua conta.",
"please_confirm_your_email_address": "Por favor, confirme o seu endereço de email",
"resend_verification_email": "Reenviar email de verificação",
"verification_email_successfully_sent": "Email de verificação enviado com sucesso. Por favor, verifique a sua caixa de entrada.",
"verification_email_successfully_sent": "Email de verificação enviado para {email}. Por favor, verifique para completar a atualização.",
"we_sent_an_email_to": "Enviámos um email para {email}. ",
"you_didnt_receive_an_email_or_your_link_expired": "Não recebeu um email ou o seu link expirou?"
},

View File

@@ -20,17 +20,23 @@ export function RenderSurvey(props: Readonly<SurveyContainerProps>) {
};
}, []);
// Define survey type-specific styles
const surveyTypeStyles =
props.survey.type === "link"
? ({
"--fb-survey-card-max-height": isDesktop ? "56dvh" : "60dvh",
"--fb-survey-card-min-height": isDesktop ? "0" : "42dvh",
} as React.CSSProperties)
: ({
"--fb-survey-card-max-height": "40dvh",
"--fb-survey-card-min-height": "40dvh",
} as React.CSSProperties);
// Determine styles based on survey type
useEffect(() => {
const root = document.documentElement;
if (props.survey.type === "link") {
root.style.setProperty("--fb-survey-card-max-height", isDesktop ? "56dvh" : "60dvh");
root.style.setProperty("--fb-survey-card-min-height", isDesktop ? "0" : "42dvh");
} else {
root.style.setProperty("--fb-survey-card-max-height", "40dvh");
root.style.setProperty("--fb-survey-card-min-height", "40dvh");
}
// Clean up when component unmounts
return () => {
root.style.removeProperty("--fb-survey-card-max-height");
root.style.removeProperty("--fb-survey-card-min-height");
};
}, [props.survey.type, isDesktop]);
const close = () => {
setIsOpen(false);
@@ -48,8 +54,7 @@ export function RenderSurvey(props: Readonly<SurveyContainerProps>) {
darkOverlay={props.darkOverlay}
clickOutside={props.clickOutside}
onClose={close}
isOpen={isOpen}
style={surveyTypeStyles}>
isOpen={isOpen}>
{/* @ts-expect-error -- TODO: fix this */}
<Survey
{...props}