fix: Tweak progress bar (#4820)

packages/surveys/src/components/general/auto-close-progress-bar.tsx

@@ -4,12 +4,13 @@ interface AutoCloseProgressBarProps {
 
 export function AutoCloseProgressBar({ autoCloseTimeout }: AutoCloseProgressBarProps) {
   return (
-    <div className="fb-bg-accent-bg fb-h-2 fb-w-full fb-overflow-hidden fb-rounded-full">
+    <div className="fb-bg-accent-bg fb-h-2 fb-w-full fb-overflow-hidden">
       <div
         key={autoCloseTimeout}
-        className="fb-bg-brand fb-z-20 fb-h-2 fb-rounded-full"
+        className="fb-bg-brand fb-z-20 fb-h-2"
         style={{
           animation: `shrink-width-to-zero ${autoCloseTimeout.toString()}s linear forwards`,
+          width: "100%",
         }}
       />
     </div>

packages/surveys/src/components/general/progress.tsx

@@ -1,8 +1,8 @@
 export function Progress({ progress }: { progress: number }) {
   return (
-    <div className="fb-bg-accent-bg fb-h-2 fb-w-full fb-overflow-hidden fb-rounded-full">
+    <div className="fb-bg-accent-bg fb-h-2 fb-w-full fb-rounded-none">
       <div
-        className="fb-transition-width fb-bg-brand fb-z-20 fb-h-2 fb-rounded-full fb-duration-500"
+        className="fb-transition-width fb-bg-brand fb-z-20 fb-h-2 fb-duration-500"
         style={{ width: `${Math.floor(progress * 100).toString()}%` }}
       />
     </div>

packages/surveys/src/components/general/survey.tsx

@@ -410,7 +410,7 @@ export function Survey({
       <AutoCloseWrapper survey={localSurvey} onClose={onClose} offset={offset}>
         <div
           className={cn(
-            "fb-no-scrollbar fb-rounded-custom fb-bg-survey-bg fb-flex fb-h-full fb-w-full fb-flex-col fb-justify-between fb-overflow-hidden fb-transition-all fb-duration-1000 fb-ease-in-out",
+            "fb-no-scrollbar fb-bg-survey-bg fb-flex fb-h-full fb-w-full fb-flex-col fb-justify-between fb-overflow-hidden fb-transition-all fb-duration-1000 fb-ease-in-out",
             cardArrangement === "simple" ? "fb-survey-shadow" : "",
             offset === 0 || cardArrangement === "simple" ? "fb-opacity-100" : "fb-opacity-0"
           )}>
@@ -431,7 +431,7 @@ export function Survey({
             )}>
             {content()}
           </div>
-          <div className="fb-mx-6 fb-mb-10 fb-mt-2 fb-space-y-3 sm:fb-mb-6 sm:fb-mt-6">
+          <div className="fb-space-y-4">
             {isBrandingEnabled ? <FormbricksBranding /> : null}
             {showProgressBar ? <ProgressBar survey={localSurvey} questionId={questionId} /> : null}
           </div>

packages/surveys/src/components/wrappers/stacked-card.tsx

@@ -110,7 +110,7 @@ export const StackedCard = ({
         ...straightCardArrangementStyles,
         ...getBottomStyles(),
       }}
-      className="fb-pointer fb-rounded-custom fb-bg-survey-bg fb-absolute fb-inset-x-0 fb-backdrop-blur-md fb-transition-all fb-ease-in-out">
+      className="fb-pointer fb-rounded-custom fb-bg-survey-bg fb-absolute fb-inset-x-0 fb-backdrop-blur-md fb-transition-all fb-ease-in-out fb-overflow-hidden">
       <div
         style={{
           opacity: contentOpacity,

packages/surveys/src/components/wrappers/stacked-cards-container.tsx

@@ -140,10 +140,8 @@ export function StackedCardsContainer({
       {cardArrangement === "simple" ? (
         <div
           id={`questionCard-${questionIdxTemp.toString()}`}
-          className={cn("fb-w-full fb-bg-survey-bg", fullSizeCards ? "fb-h-full" : "")}
-          style={{
-            ...borderStyles,
-          }}>
+          className={cn("fb-w-full fb-bg-survey-bg fb-overflow-hidden", fullSizeCards ? "fb-h-full" : "")}
+          style={borderStyles}>
           {getCardContent(questionIdxTemp, 0)}
         </div>
       ) : (