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

Reduced height of surveys for previews and handled overflow, if survey height exceeds preview height

Browse Source
This commit is contained in:
Jakob Schott
2025-05-15 09:24:06 +02:00
parent 39e5518f2c
commit 89985d4f4f
4 changed files with 56 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -175,7 +175,7 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
);
} else if (isEditorView) {
return (
<div ref={ContentRef} className="overflow-hiddem flex flex-grow flex-col rounded-b-lg">
<div ref={ContentRef} className="flex flex-grow flex-col overflow-hidden rounded-b-lg">
<div className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6">
{renderBackground()}
<div className="flex h-full w-full items-start justify-center pt-[10dvh]">{children}</div>

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

@@ -1,5 +1,5 @@
import "@testing-library/jest-dom/vitest";
import { render, screen } from "@testing-library/preact";
import { render } from "@testing-library/preact";
// Ensure screen is imported
import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
// Use test consistently

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

@@ -191,4 +191,52 @@ describe("ScrollableContainer", () => {
);
}).not.toThrow();
});
test("applies reduced height when isSurveyPreview is true", () => {
// Create a survey-preview element to make isSurveyPreview true
const previewElement = document.createElement("div");
previewElement.id = "survey-preview";
document.body.appendChild(previewElement);
const { container } = render(
<ScrollableContainer>
<div>Preview Content</div>
</ScrollableContainer>
);
const scrollableDiv = container.querySelector<HTMLElement>("#scrollable-container");
expect(scrollableDiv).toBeInTheDocument();
if (scrollableDiv) {
const computedStyle = scrollableDiv.style;
expect(computedStyle.maxHeight).toBe("calc(var(--fb-survey-card-max-height, 42dvh) * 0.66)");
expect(computedStyle.minHeight).toBe("calc(var(--fb-survey-card-min-height, 42dvh) * 0.66)");
}
// Clean up
document.body.removeChild(previewElement);
});
test("applies normal height when isSurveyPreview is false", () => {
// Ensure no survey-preview element exists
const existingPreview = document.getElementById("survey-preview");
if (existingPreview) {
document.body.removeChild(existingPreview);
}
const { container } = render(
<ScrollableContainer>
<div>Regular Content</div>
</ScrollableContainer>
);
const scrollableDiv = container.querySelector<HTMLElement>("#scrollable-container");
expect(scrollableDiv).toBeInTheDocument();
if (scrollableDiv) {
const computedStyle = scrollableDiv.style;
expect(computedStyle.maxHeight).toBe("calc(var(--fb-survey-card-max-height, 42dvh) * 1)");
expect(computedStyle.minHeight).toBe("calc(var(--fb-survey-card-min-height, 42dvh) * 1)");
}
});
});

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

@@ -6,12 +6,15 @@ interface ScrollableContainerProps {
children: JSX.Element;
}
export function ScrollableContainer({ children }: ScrollableContainerProps) {
export function ScrollableContainer({ children }: Readonly<ScrollableContainerProps>) {
const [isAtBottom, setIsAtBottom] = useState(false);
const [isAtTop, setIsAtTop] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
const isSurveyPreview = Boolean(document.getElementById("survey-preview"));
console.log("isSurveyPreview", document.getElementById("survey-preview"));
const previewScaleCoifficient = isSurveyPreview ? 0.66 : 1;
const checkScroll = () => {
if (!containerRef.current) return;
const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
@@ -48,8 +51,8 @@ export function ScrollableContainer({ children }: ScrollableContainerProps) {
ref={containerRef}
style={{
scrollbarGutter: "stable both-edges",
maxHeight: "var(--fb-survey-card-max-height, 60dvh)",
minHeight: "var(--fb-survey-card-min-height, 60dvh)",
maxHeight: `calc(var(--fb-survey-card-max-height, 42dvh) * ${previewScaleCoifficient})`,
minHeight: `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}