fix: date picker overflow UI (#1872)

Co-authored-by: Matti Nannt <mail@matthiasnannt.com>

apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx

@@ -20,35 +20,42 @@ export default function Modal({
   const [show, setShow] = useState(false);
   const modalRef = useRef<HTMLDivElement | null>(null);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-  const calculateScaling = () => {
-    if (previewMode === "mobile") return "";
-    const scaleValue = (() => {
-      if (windowWidth > 1600) return "1";
-      else if (windowWidth > 1200) return ".9";
-      else if (windowWidth > 900) return ".8";
-      return "0.7";
-    })();
 
-    const getPlacementClass = (() => {
-      switch (placement) {
-        case "bottomLeft":
-          return "bottom left";
-        case "bottomRight":
-          return "bottom right";
-        case "topLeft":
-          return "top left";
-        case "topRight":
-          return "top right";
-        default:
-          return "";
+  const calculateScaling = () => {
+    let scaleValue = "1";
+
+    if (previewMode === "mobile") {
+      scaleValue = "1";
+    } else {
+      if (windowWidth > 1600) {
+        scaleValue = "1";
+      } else if (windowWidth > 1200) {
+        scaleValue = ".9";
+      } else if (windowWidth > 900) {
+        scaleValue = ".8";
+      } else {
+        scaleValue = "0.7";
       }
-    })();
+    }
+
+    let placementClass = "";
+
+    if (placement === "bottomLeft") {
+      placementClass = "bottom left";
+    } else if (placement === "bottomRight") {
+      placementClass = "bottom right";
+    } else if (placement === "topLeft") {
+      placementClass = "top left";
+    } else if (placement === "topRight") {
+      placementClass = "top right";
+    }
 
     return {
       transform: `scale(${scaleValue})`,
-      "transform-origin": getPlacementClass,
+      "transform-origin": placementClass,
     };
   };
+
   const scalingClasses = calculateScaling();
 
   useEffect(() => {
@@ -86,13 +93,13 @@ export default function Modal({
         ? "translate-x-0 opacity-100"
         : "translate-x-32 opacity-0"
       : previewMode === "mobile"
-        ? show
-          ? "bottom-0"
-          : "-bottom-full"
-        : "";
+      ? show
+        ? "bottom-0"
+        : "-bottom-full"
+      : "";
 
   return (
-    <div aria-live="assertive" className="relative h-full w-full overflow-visible bg-slate-300">
+    <div aria-live="assertive" className="relative h-full w-full bg-slate-300">
       <div
         ref={modalRef}
         style={{ ...highlightBorderColorStyle, ...scalingClasses }}

apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx

@@ -300,7 +300,7 @@ export default function PreviewSurvey({
               </Modal>
             ) : (
               <MediaBackground survey={survey} ContentRef={ContentRef} isEditorView>
-                <div className="z-0 w-full  max-w-md rounded-lg p-4">
+                <div className="z-0 w-full max-w-md rounded-lg p-4">
                   <SurveyInline
                     survey={survey}
                     brandColor={brandColor}

packages/surveys/src/sideload/question-date/Question.tsx

@@ -50,11 +50,11 @@ export default function Question({ defaultDate, format }: { defaultDate?: Date;
   }, [format, selectedDate]);
 
   return (
-    <div className="relative h-12">
+    <div className="relative h-40">
       {!datePickerOpen && (
         <div
           onClick={() => setDatePickerOpen(true)}
-          className="relative flex h-12 w-full cursor-pointer appearance-none items-center justify-center rounded-lg border border-slate-300 bg-white text-left text-base font-normal text-slate-900 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1">
+          className="relative flex h-40 w-full cursor-pointer appearance-none items-center justify-center rounded-lg border border-slate-300 bg-slate-50 text-left text-base font-normal text-slate-900 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1">
           <div className="flex items-center gap-2">
             <CalendarIcon />
             <span>{selectedDate ? formattedDate : "Select a date"}</span>

packages/surveys/src/sideload/question-date/styles/globals.css

@@ -3,8 +3,9 @@
 }
 
 .dp-input-root [class$="wrapper"] {
-  height: 48px;
+  height: 160px;
   display: flex;
+  background: rgb(248 250 252);
   flex-direction: row-reverse;
   gap: 8px;
   justify-content: center;
@@ -45,6 +46,16 @@
   display: none;
 }
 
+.react-date-picker__calendar--open {
+  position: absolute !important;
+  top: 0 !important;
+}
+
+.calendar-root {
+  position: absolute !important;
+  top: 0 !important;
+}
+
 .calendar-root [class$="navigation"] {
   height: 36px;
   margin-bottom: 0px;