From eb41e4a419c27dcb123b3fd85866e1c800408ec1 Mon Sep 17 00:00:00 2001
From: Dhruwang <dhruwangjariwala18@gmail.com>
Date: Tue, 15 Aug 2023 10:41:30 +0530
Subject: [PATCH 1/2] fix: left align issue

---
 packages/js/src/components/CTAQuestion.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/js/src/components/CTAQuestion.tsx b/packages/js/src/components/CTAQuestion.tsx
index 936872d646..f990fb2189 100644
--- a/packages/js/src/components/CTAQuestion.tsx
+++ b/packages/js/src/components/CTAQuestion.tsx
@@ -31,7 +31,9 @@ export default function CTAQuestion({
       <HtmlBody htmlString={question.html} questionId={question.id} />
 
       <div className="fb-mt-4 fb-flex fb-w-full fb-justify-between">
-        {goToPreviousQuestion && <BackButton onClick={() => goToPreviousQuestion()} />}
+        <div>
+          {goToPreviousQuestion && <BackButton onClick={() => goToPreviousQuestion()} />}
+        </div>
         <div className="fb-flex fb-justify-end">
           {(!question.required || storedResponseValue) && (
             <button

From 7c845202b2c5feb546fef0a45b65a4d24b501ee4 Mon Sep 17 00:00:00 2001
From: Johannes <johannes@formbricks.com>
Date: Tue, 15 Aug 2023 10:31:07 +0200
Subject: [PATCH 2/2] responsiveness demo app

---
 apps/demo/pages/app/index.tsx                 | 23 +++++++++++++++----
 .../shared/SurveyStatusIndicator.tsx          |  2 +-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/apps/demo/pages/app/index.tsx b/apps/demo/pages/app/index.tsx
index 3a89040ba9..cf3d6b1b99 100644
--- a/apps/demo/pages/app/index.tsx
+++ b/apps/demo/pages/app/index.tsx
@@ -15,8 +15,8 @@ export default function AppPage({}) {
   }, [darkMode]);
 
   return (
-    <div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
-      <div className="flex justify-between">
+    <div className="h-full bg-white px-12 py-6 dark:bg-slate-800">
+      <div className="flex flex-col justify-between md:flex-row">
         <div>
           <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
             Formbricks In-product Survey Demo App
@@ -27,7 +27,7 @@ export default function AppPage({}) {
           </p>
         </div>
         <button
-          className="rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
+          className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
           onClick={() => setDarkMode(!darkMode)}>
           Toggle Dark Mode
         </button>
@@ -36,14 +36,27 @@ export default function AppPage({}) {
       <div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
         <div>
           <div className="rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
-            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Setup .env</h3>
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">1. Setup .env</h3>
             <p className="text-slate-700 dark:text-slate-300">
               Copy the environment ID of your Formbricks app to the env variable in demo/.env
             </p>
             <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
+
+            <div className="mt-4 flex-col items-start text-sm text-slate-700 dark:text-slate-300 sm:flex sm:items-center sm:text-base">
+              <p className="mb-1 sm:mb-0 sm:mr-2">You&apos;re connected with env:</p>
+              <div className="flex items-center">
+                <strong className="w-32 truncate sm:w-auto">
+                  {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}
+                </strong>
+                <span className="relative ml-2 flex h-3 w-3">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+                  <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
+                </span>
+              </div>
+            </div>
           </div>
           <div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
-            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Widget Logs</h3>
+            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">2. Widget Logs</h3>
             <p className="text-slate-700 dark:text-slate-300">
               Look at the logs to understand how the widget works.{" "}
               <strong className="dark:text-white">Open your browser console</strong> to see the logs.
diff --git a/apps/web/components/shared/SurveyStatusIndicator.tsx b/apps/web/components/shared/SurveyStatusIndicator.tsx
index 01feab111a..96c95ddd8a 100644
--- a/apps/web/components/shared/SurveyStatusIndicator.tsx
+++ b/apps/web/components/shared/SurveyStatusIndicator.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui";
 import { useEnvironment } from "@/lib/environments/environments";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui";
 import { ArchiveBoxIcon, CheckIcon, PauseIcon } from "@heroicons/react/24/solid";
 
 interface SurveyStatusIndicatorProps {