mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-20 19:30:41 -05:00
Code Issues Packages Projects Releases 164 Wiki Activity

added constraints based on viewport height

Browse Source
This commit is contained in:
Jakob Schott
2025-05-15 14:35:12 +02:00
parent 0b88e58dcb
commit 25f8b2d07f
2 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/modules/survey/link/components/link-survey-wrapper.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export const LinkSurveyWrapper = ({
surveyType={surveyType}
styling={styling}
onBackgroundLoaded={handleBackgroundLoaded}>
<div className="xs:items-end flex max-h-dvh min-h-dvh justify-center overflow-clip pt-[16dvh] md:items-start">
<div className="flex max-h-dvh min-h-dvh items-end justify-center overflow-clip pt-[16dvh] md:items-start">
{!styling.isLogoHidden && project.logo?.url && <ClientLogo projectLogo={project.logo} />}
<div className="h-full w-full max-w-4xl space-y-6 md:px-1.5">
{isPreview && (
packages/surveys/src/components/general/render-survey.tsx
+25 -5
View File
@@ -1,16 +1,36 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import { SurveyContainerProps } from "@formbricks/types/formbricks-surveys";
import { SurveyContainer } from "../wrappers/survey-container";
import { Survey } from "./survey";
export function RenderSurvey(props: SurveyContainerProps) {
const [isOpen, setIsOpen] = useState(true);
const [isDesktop, setIsDesktop] = useState(false);
// Check viewport width on mount and resize
useEffect(() => {
const checkViewportWidth = () => {
setIsDesktop(window.innerWidth > 768);
};
checkViewportWidth();
window.addEventListener("resize", checkViewportWidth);
return () => {
window.removeEventListener("resize", checkViewportWidth);
};
}, []);
// Define survey type-specific styles
const surveyTypeStyles = {
"--fb-survey-card-max-height": props.survey.type === "link" ? "56dvh" : "25dvh",
"--fb-survey-card-min-height": props.survey.type === "link" ? "0dvh" : "25dvh",
} as React.CSSProperties;
const surveyTypeStyles =
props.survey.type === "link"
? {
"--fb-survey-card-max-height": "60dvh",
"--fb-survey-card-min-height": isDesktop ? `0dvh` : "60dvh",
}
: ({
"--fb-survey-card-max-height": "25dvh",
"--fb-survey-card-min-height": "25dvh",
} as React.CSSProperties);
const close = () => {
setIsOpen(false);