feat: add scroll indicator button to scrollable container (#6803)

Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>

packages/surveys/src/components/general/formbricks-branding.tsx

@@ -3,18 +3,19 @@ import { useTranslation } from "react-i18next";
 export function FormbricksBranding() {
   const { t } = useTranslation();
   return (
-    <a
-      href="https://formbricks.com?utm_source=survey_branding"
-      target="_blank"
-      tabIndex={-1}
-      className="fb-flex fb-justify-center"
-      rel="noopener">
-      <p className="fb-text-signature fb-text-xs">
-        {t("common.powered_by")}{" "}
-        <b>
-          <span className="fb-text-branding-text hover:fb-text-signature">Formbricks</span>
-        </b>
-      </p>
-    </a>
+    <span className="fb-flex fb-justify-center">
+      <a
+        href="https://formbricks.com?utm_source=survey_branding"
+        target="_blank"
+        tabIndex={-1}
+        rel="noopener">
+        <p className="fb-text-signature fb-text-xs">
+          {t("common.powered_by")}{" "}
+          <b>
+            <span className="fb-text-branding-text hover:fb-text-signature">Formbricks</span>
+          </b>
+        </p>
+      </a>
+    </span>
   );
 }

packages/surveys/src/components/icons/chevron-down-icon.tsx

@@ -0,0 +1,24 @@
+interface ChevronDownIconProps {
+  className?: string;
+}
+
+export const ChevronDownIcon = ({ className }: ChevronDownIconProps) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden="true">
+      <path
+        d="m6 9 6 6 6-6"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

packages/surveys/src/components/wrappers/scrollable-container.tsx

@@ -1,6 +1,7 @@
 import type { JSX, Ref } from "preact";
 import { forwardRef } from "preact/compat";
 import { useEffect, useImperativeHandle, useRef, useState } from "preact/hooks";
+import { ChevronDownIcon } from "@/components/icons/chevron-down-icon";
 import { cn } from "@/lib/utils";
 
 interface ScrollableContainerProps {
@@ -85,7 +86,17 @@ export const ScrollableContainer = forwardRef<ScrollableContainerHandle, Scrolla
           {children}
         </div>
         {!isAtBottom && (
-          <div className="fb-from-survey-bg fb-absolute fb-bottom-0 fb-left-4 fb-right-4 fb-h-4 fb-bg-gradient-to-t fb-to-transparent" />
+          <>
+            <div className="fb-from-survey-bg fb-absolute fb-bottom-0 fb-left-4 fb-right-4 fb-h-4 fb-bg-gradient-to-t fb-to-transparent" />
+            <button
+              type="button"
+              onClick={scrollToBottom}
+              style={{ transform: "translateX(-50%)" }}
+              className="fb-absolute fb-bottom-2 fb-left-1/2 fb-z-20 fb-flex fb-h-8 fb-w-8 fb-items-center fb-justify-center fb-rounded-full fb-bg-survey-bg fb-border fb-border-transparent hover:fb-border-border fb-shadow-lg fb-transition-colors focus:fb-ring-2 focus:fb-outline-none focus:fb-ring-brand focus:fb-ring-offset-2"
+              aria-label="Scroll to bottom">
+              <ChevronDownIcon className="fb-text-heading fb-w-5 fb-h-5" />
+            </button>
+          </>
         )}
       </div>
     );

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

@@ -111,7 +111,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 fb-overflow-hidden">
+      className="fb-pointer fb-rounded-custom fb-bg-survey-bg fb-absolute fb-inset-x-0 fb-transition-all fb-ease-in-out fb-overflow-hidden">
       <div
         style={{
           opacity: contentOpacity,