mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-19 19:21:15 -05:00
Code Issues Packages Projects Releases 162 Wiki Activity

Fixed mobile view for link survey

Browse Source
This commit is contained in:
Jakob Schott
2025-05-15 15:36:08 +02:00
parent 25f8b2d07f
commit b5a0b165ed
4 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/modules/survey/link/components/link-survey-wrapper.tsx
View File

@@ -78,9 +78,9 @@ export const LinkSurveyWrapper = ({
surveyType={surveyType}
styling={styling}
onBackgroundLoaded={handleBackgroundLoaded}>
<div className="flex max-h-dvh min-h-dvh items-end justify-center overflow-clip pt-[16dvh] md:items-start">
<div className="flex max-h-dvh min-h-dvh items-center justify-center overflow-clip md:items-start md:pt-[16dvh]">
{!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">
<div className="h-full w-full max-w-4xl space-y-6 px-1.5">
{isPreview && (
<div className="fixed left-0 top-0 flex w-full items-center justify-between bg-slate-600 p-2 px-4 text-center text-sm text-white shadow-sm">
<div />

1
apps/web/modules/ui/components/media-background/index.tsx
View File

@@ -166,6 +166,7 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
return (
<div
ref={ContentRef}
id="mobile-preview"
className={`relative h-[90%] max-h-[42rem] w-[22rem] overflow-hidden rounded-[3rem] border-[6px] border-slate-400 ${getFilterStyle()}`}>
{/* below element is use to create notch for the mobile device mockup */}
<div className="absolute left-1/2 right-1/2 top-2 z-20 h-4 w-1/3 -translate-x-1/2 transform rounded-full bg-slate-400"></div>

8
packages/surveys/src/components/general/render-survey.tsx
View File

@@ -23,10 +23,10 @@ export function RenderSurvey(props: SurveyContainerProps) {
// Define survey type-specific styles
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": isDesktop ? "56dvh" : "33dvh",
"--fb-survey-card-min-height": isDesktop ? `0dvh` : "33dvh",
} as React.CSSProperties)
: ({
"--fb-survey-card-max-height": "25dvh",
"--fb-survey-card-min-height": "25dvh",

9
packages/surveys/src/components/wrappers/scrollable-container.tsx
View File

@@ -11,6 +11,7 @@ export function ScrollableContainer({ children }: Readonly<ScrollableContainerPr
const [isAtTop, setIsAtTop] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
const isSurveyPreview = Boolean(document.getElementById("survey-preview"));
const isMobilePreview = isSurveyPreview ? Boolean(document.getElementById("mobile-preview")) : false;
const previewScaleCoifficient = isSurveyPreview ? 0.66 : 1;
const checkScroll = () => {
@@ -49,8 +50,12 @@ export function ScrollableContainer({ children }: Readonly<ScrollableContainerPr
ref={containerRef}
style={{
scrollbarGutter: "stable both-edges",
maxHeight: `calc(var(--fb-survey-card-max-height, 42dvh) * ${previewScaleCoifficient})`,
minHeight: `calc(var(--fb-survey-card-min-height, 42dvh) * ${previewScaleCoifficient})`,
maxHeight: isMobilePreview
? "25dvh"
: `calc(var(--fb-survey-card-max-height, 42dvh) * ${previewScaleCoifficient})`,
minHeight: isMobilePreview
? "25dvh"
: `calc(var(--fb-survey-card-min-height, 42dvh) * ${previewScaleCoifficient})`,
}}
className={cn("fb-overflow-auto fb-px-4 fb-pb-4 fb-bg-survey-bg")}>
{children}