fix: ui issues (#2665)

packages/surveys/src/components/wrappers/ScrollableContainer.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import { useEffect, useRef, useState } from "preact/hooks";
 
 interface ScrollableContainerProps {
@@ -58,10 +59,8 @@ export const ScrollableContainer = ({ children }: ScrollableContainerProps) => {
           scrollbarGutter: "stable both-edges",
           maxHeight: isSurveyPreview ? "40dvh" : "60dvh",
         }}
-        className={`overflow-${isOverflowHidden ? "hidden" : "auto"} px-4 pb-1`}
+        className={cn("overflow-auto px-4 pb-1", isOverflowHidden ? "no-scrollbar" : "bg-survey-bg")}
         onMouseEnter={() => toggleOverflow(false)}
-        onTouchStart={() => toggleOverflow(false)}
-        onTouchEnd={() => toggleOverflow(true)}
         onMouseLeave={() => toggleOverflow(true)}>
         {children}
       </div>

packages/surveys/src/components/wrappers/StackedCardsContainer.tsx

@@ -130,6 +130,7 @@ export const StackedCardsContainer = ({
       <div style={{ height: cardHeight }}></div>
       {cardArrangement === "simple" ? (
         <div
+          className="w-full"
           style={{
             ...borderStyles,
           }}>

packages/surveys/src/styles/global.css

@@ -104,3 +104,18 @@ p.fb-editor-paragraph {
     width: 0%;
   }
 }
+
+.no-scrollbar {
+  -ms-overflow-style: none !important;  /* Internet Explorer 10+ */
+  scrollbar-width: thin !important;     /* Firefox */
+  scrollbar-color: transparent transparent !important; /* Firefox */
+
+  /* Chrome, Edge, and Safari */
+  &::-webkit-scrollbar {
+    width: 0 !important;
+    background: transparent !important;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: transparent !important;
+  }
+}

packages/ui/SurveysList/components/SurveyCard.tsx

@@ -128,8 +128,8 @@ export const SurveyCard = ({
         key={survey.id}
         className="relative grid w-full grid-cols-8 place-items-center gap-3 rounded-xl border border-slate-200 bg-white p-4
     shadow-sm transition-all ease-in-out hover:scale-[101%]">
-        <div className="col-span-2 flex max-w-full items-center justify-self-start truncate whitespace-nowrap text-sm font-medium text-slate-900">
-          {survey.name}
+        <div className="col-span-2 flex max-w-full items-center justify-self-start text-sm font-medium text-slate-900">
+          <div className="w-full truncate">{survey.name}</div>
         </div>
         <div
           className={cn(