From 0164eca206efab0104145555ee39423fef076ffa Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Thu, 13 Mar 2025 04:27:57 -0700
Subject: [PATCH] fix: survey display and card width (#4937)

---
 apps/web/modules/survey/link/components/legal-footer.tsx    | 2 +-
 .../modules/survey/link/components/link-survey-wrapper.tsx  | 2 +-
 apps/web/modules/ui/components/media-background/index.tsx   | 2 +-
 apps/web/modules/ui/components/preview-survey/index.tsx     | 2 +-
 .../surveys/src/components/questions/matrix-question.tsx    | 6 ++++--
 .../src/components/wrappers/scrollable-container.tsx        | 4 ++--
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/web/modules/survey/link/components/legal-footer.tsx b/apps/web/modules/survey/link/components/legal-footer.tsx
index f68bd811a8..2903799ae6 100644
--- a/apps/web/modules/survey/link/components/legal-footer.tsx
+++ b/apps/web/modules/survey/link/components/legal-footer.tsx
@@ -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")}
diff --git a/apps/web/modules/survey/link/components/link-survey-wrapper.tsx b/apps/web/modules/survey/link/components/link-survey-wrapper.tsx
index 18acc02a39..f6cb4b464f 100644
--- a/apps/web/modules/survey/link/components/link-survey-wrapper.tsx
+++ b/apps/web/modules/survey/link/components/link-survey-wrapper.tsx
@@ -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 />
diff --git a/apps/web/modules/ui/components/media-background/index.tsx b/apps/web/modules/ui/components/media-background/index.tsx
index 5c3956826c..803778b4af 100644
--- a/apps/web/modules/ui/components/media-background/index.tsx
+++ b/apps/web/modules/ui/components/media-background/index.tsx
@@ -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()}
diff --git a/apps/web/modules/ui/components/preview-survey/index.tsx b/apps/web/modules/ui/components/preview-survey/index.tsx
index b6c5146962..96f0d7107a 100644
--- a/apps/web/modules/ui/components/preview-survey/index.tsx
+++ b/apps/web/modules/ui/components/preview-survey/index.tsx
@@ -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}
diff --git a/packages/surveys/src/components/questions/matrix-question.tsx b/packages/surveys/src/components/questions/matrix-question.tsx
index 98fc65a11d..22c58d422e 100644
--- a/packages/surveys/src/components/questions/matrix-question.tsx
+++ b/packages/surveys/src/components/questions/matrix-question.tsx
@@ -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>
diff --git a/packages/surveys/src/components/wrappers/scrollable-container.tsx b/packages/surveys/src/components/wrappers/scrollable-container.tsx
index 769b3500ff..e0f6502ab5 100644
--- a/packages/surveys/src/components/wrappers/scrollable-container.tsx
+++ b/packages/surveys/src/components/wrappers/scrollable-container.tsx
@@ -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 && (