From c37d3ae0f9fab8fd3d2d53a95c54cf57e30b9f5d Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Wed, 22 May 2024 19:33:17 +0530
Subject: [PATCH] fix: ui issues (#2665)

---
 .../components/wrappers/ScrollableContainer.tsx   |  5 ++---
 .../components/wrappers/StackedCardsContainer.tsx |  1 +
 packages/surveys/src/styles/global.css            | 15 +++++++++++++++
 packages/ui/SurveysList/components/SurveyCard.tsx |  4 ++--
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/surveys/src/components/wrappers/ScrollableContainer.tsx b/packages/surveys/src/components/wrappers/ScrollableContainer.tsx
index e34ce8901c..4687f596cd 100644
--- a/packages/surveys/src/components/wrappers/ScrollableContainer.tsx
+++ b/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>
diff --git a/packages/surveys/src/components/wrappers/StackedCardsContainer.tsx b/packages/surveys/src/components/wrappers/StackedCardsContainer.tsx
index 9d3eeb9422..b45f93cffa 100644
--- a/packages/surveys/src/components/wrappers/StackedCardsContainer.tsx
+++ b/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,
           }}>
diff --git a/packages/surveys/src/styles/global.css b/packages/surveys/src/styles/global.css
index fe186667c4..7141962e9c 100644
--- a/packages/surveys/src/styles/global.css
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/packages/ui/SurveysList/components/SurveyCard.tsx b/packages/ui/SurveysList/components/SurveyCard.tsx
index 1c710fbab5..737d822c16 100644
--- a/packages/ui/SurveysList/components/SurveyCard.tsx
+++ b/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(