fix: survey display and card width (#4937)

This commit is contained in:
Johannes
2025-03-13 04:27:57 -07:00
committed by GitHub
parent f227c9e97e
commit 0164eca206
6 changed files with 10 additions and 8 deletions

View File

@@ -21,7 +21,7 @@ export const LegalFooter = ({
return (
<div className="absolute bottom-0 z-[1500] h-10 w-full" role="contentinfo">
<div className="mx-auto flex h-full max-w-lg items-center justify-center p-2 text-center text-xs text-slate-500">
<div className="mx-auto flex h-full max-w-2xl items-center justify-center p-2 text-center text-xs text-slate-500">
{IMPRINT_URL && (
<Link href={IMPRINT_URL} target="_blank" className="hover:underline" tabIndex={-1}>
{t("common.imprint")}

View File

@@ -80,7 +80,7 @@ export const LinkSurveyWrapper = ({
onBackgroundLoaded={handleBackgroundLoaded}>
<div className="flex max-h-dvh min-h-dvh items-center justify-center overflow-clip">
{!styling.isLogoHidden && project.logo?.url && <ClientLogo projectLogo={project.logo} />}
<div className="h-full w-full max-w-lg space-y-6 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 />

View File

@@ -166,7 +166,7 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
return (
<div
ref={ContentRef}
className={`relative h-[90%] max-h-[40rem] w-[22rem] overflow-hidden rounded-[3rem] border-[6px] border-slate-400 ${getFilterStyle()}`}>
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>
{surveyType === "link" && renderBackground()}

View File

@@ -392,7 +392,7 @@ export const PreviewSurvey = ({
<ClientLogo environmentId={environment.id} projectLogo={project.logo} previewSurvey />
)}
</div>
<div className="z-0 w-full max-w-lg rounded-lg border-transparent">
<div className="z-0 w-full max-w-4xl rounded-lg border-transparent">
<SurveyInline
survey={{ ...survey, type: "link" }}
isBrandingEnabled={project.linkSurveyBranding}

View File

@@ -144,10 +144,12 @@ export function MatrixQuestion({
</thead>
<tbody>
{questionRows.map((row, rowIndex) => (
<tr key={`row-${rowIndex.toString()}`} className={rowIndex % 2 === 0 ? "bg-input-bg" : ""}>
<tr
key={`row-${rowIndex.toString()}`}
className={rowIndex % 2 === 0 ? "fb-bg-input-bg" : ""}>
<th
scope="row"
className="fb-text-heading fb-rounded-l-custom fb-max-w-40 fb-break-words fb-pr-4 fb-pl-2 fb-py-2"
className="fb-text-heading fb-rounded-l-custom fb-max-w-40 fb-break-words fb-pr-4 fb-pl-2 fb-py-2 fb-text-left fb-min-w-[20%] fb-font-semibold"
dir="auto">
{getLocalizedValue(row, languageCode)}
</th>

View File

@@ -48,9 +48,9 @@ export function ScrollableContainer({ children }: ScrollableContainerProps) {
ref={containerRef}
style={{
scrollbarGutter: "stable both-edges",
maxHeight: isSurveyPreview ? "40dvh" : "60dvh",
maxHeight: isSurveyPreview ? "42dvh" : "60dvh",
}}
className={cn("fb-overflow-auto fb-px-4 fb-pb-6 fb-bg-survey-bg")}>
className={cn("fb-overflow-auto fb-px-4 fb-pb-4 fb-bg-survey-bg")}>
{children}
</div>
{!isAtBottom && (