fix: fixes survey link share modal and moble nav menu

apps/web/app/(app)/environments/[environmentId]/EnvironmentsNavbar.tsx

@@ -16,6 +16,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/shared/DropdownMenu";
+import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import CreateTeamModal from "@/components/team/CreateTeamModal";
 import {
@@ -65,6 +66,8 @@ import AddProductModal from "./AddProductModal";
 import { formbricksLogout } from "@/lib/formbricks";
 import formbricks from "@formbricks/js";
 import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
+import { MenuIcon } from "lucide-react";
+import { cn } from "@formbricks/lib/cn";
 
 interface EnvironmentsNavbarProps {
   environmentId: string;
@@ -86,6 +89,8 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
   const [showAddProductModal, setShowAddProductModal] = useState(false);
   const [showCreateTeamModal, setShowCreateTeamModal] = useState(false);
 
+  const [mobileNavMenuOpen, setMobileNavMenuOpen] = useState(false);
+
   useEffect(() => {
     if (environment && environment.widgetSetupCompleted) {
       setWidgetSetupCompleted(true);
@@ -227,13 +232,14 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
 
       <div className="w-full px-4 sm:px-6">
         <div className="flex h-14 justify-between">
-          <div className="flex  space-x-4 py-2">
+          <div className="flex space-x-4 py-2">
             <Link
               href={`/environments/${environmentId}/surveys/`}
               className=" flex items-center justify-center rounded-md bg-gradient-to-b text-white transition-all ease-in-out hover:scale-105">
               {/* <PlusIcon className="h-6 w-6" /> */}
               <Image src={FaveIcon} width={30} height={30} alt="faveicon" />
             </Link>
+
             {navigation.map((item) => {
               const IconComponent: React.ElementType = item.icon;
 
@@ -245,7 +251,7 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
                     item.current
                       ? "bg-slate-100 text-slate-900"
                       : "text-slate-900 hover:bg-slate-50 hover:text-slate-900",
-                    "inline-flex items-center rounded-md px-2 py-1 text-sm font-medium"
+                    "hidden items-center rounded-md px-2 py-1 text-sm font-medium sm:inline-flex"
                   )}
                   aria-current={item.current ? "page" : undefined}>
                   <IconComponent className="mr-3 h-5 w-5" />
@@ -254,6 +260,34 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
               );
             })}
           </div>
+
+          <div className="flex items-center sm:hidden">
+            <Popover open={mobileNavMenuOpen} onOpenChange={setMobileNavMenuOpen}>
+              <PopoverTrigger onClick={() => setMobileNavMenuOpen(!mobileNavMenuOpen)}>
+                <span>
+                  <MenuIcon className="h-6 w-6 rounded-md bg-slate-200 p-1 text-slate-600" />
+                </span>
+              </PopoverTrigger>
+              <PopoverContent className="mr-4 bg-slate-200">
+                <div className="flex flex-col">
+                  {navigation.map((navItem) => (
+                    <Link key={navItem.name} href={navItem.href}>
+                      <div
+                        onClick={() => setMobileNavMenuOpen(false)}
+                        className={cn(
+                          "flex items-center space-x-2 rounded-md p-2",
+                          navItem.current && "bg-slate-300"
+                        )}>
+                        <navItem.icon className="h-5 w-5" />
+                        <span className="font-medium text-slate-600">{navItem.name}</span>
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+
           <div className="hidden sm:ml-6 sm:flex sm:items-center">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/LinkModalButton.tsx

@@ -14,6 +14,7 @@ interface LinkSurveyShareButtonProps {
 
 export default function LinkSurveyShareButton({ survey, className }: LinkSurveyShareButtonProps) {
   const [showLinkModal, setShowLinkModal] = useState(false);
+
   return (
     <>
       <Button

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/LinkSurveyModal.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import CodeBlock from "@/components/shared/CodeBlock";
-import Modal from "@/components/shared/Modal";
+// import Modal from "@/components/shared/Modal";
+import { Dialog, DialogContent } from "@formbricks/ui";
 import { TSurvey } from "@formbricks/types/v1/surveys";
 import { Button } from "@formbricks/ui";
 import { CheckIcon } from "@heroicons/react/24/outline";
@@ -40,8 +41,8 @@ top:0; width:100%; height:100%; border:0;">
   };
 
   return (
-    <Modal open={open} setOpen={setOpen} blur={false}>
-      <div>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="bottom-0 max-w-sm bg-white p-4 sm:bottom-auto sm:max-w-xl sm:p-6">
         <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-teal-100">
           <CheckIcon className="h-6 w-6 text-teal-600" aria-hidden="true" />
         </div>
@@ -50,24 +51,32 @@ top:0; width:100%; height:100%; border:0;">
           {showEmbed ? (
             <div className="mt-4">
               <p className="text-sm text-gray-500">Embed survey on your website:</p>
-              <CodeBlock language="html">{iframeCode}</CodeBlock>
+              <CodeBlock
+                customCodeClass="!whitespace-normal sm:!whitespace-pre-wrap !break-all sm:!break-normal"
+                language="html">
+                {iframeCode}
+              </CodeBlock>
             </div>
           ) : (
             <div className="mt-4">
               <p className="text-sm text-gray-500">Share this link to let people answer your survey:</p>
-              <p
+              <div
                 ref={linkTextRef}
-                className="relative mt-3 w-full rounded-lg border border-slate-300 bg-slate-50 p-3 text-center text-slate-800"
+                className="relative mt-3 max-w-full overflow-auto rounded-lg border border-slate-300 bg-slate-50 p-3 text-center text-slate-800"
                 onClick={() => handleTextSelection()}>
-                {`${window.location.protocol}//${window.location.host}/s/${survey.id}`}
-              </p>
+                <span
+                  style={{
+                    wordBreak: "break-all",
+                  }}>{`${window.location.protocol}//${window.location.host}/s/${survey.id}`}</span>
+              </div>
             </div>
           )}
-          <div className="mt-4 flex justify-end space-x-2">
+          <div className="mt-4 flex flex-col justify-center gap-2 sm:flex-row sm:justify-end">
             <Button
               variant="secondary"
               title="Embed survey in your website"
               aria-label="Embed survey in your website"
+              className="flex justify-center"
               onClick={() => {
                 setShowEmbed(true);
                 navigator.clipboard.writeText(iframeCode);
@@ -87,6 +96,7 @@ top:0; width:100%; height:100%; border:0;">
               }}
               title="Copy survey link to clipboard"
               aria-label="Copy survey link to clipboard"
+              className="flex justify-center"
               EndIcon={DocumentDuplicateIcon}>
               Copy URL
             </Button>
@@ -94,6 +104,7 @@ top:0; width:100%; height:100%; border:0;">
               variant="darkCTA"
               title="Preview survey"
               aria-label="Preview survey"
+              className="flex justify-center"
               href={`${window.location.protocol}//${window.location.host}/s/${survey.id}?preview=true`}
               target="_blank"
               EndIcon={EyeIcon}>
@@ -101,7 +112,7 @@ top:0; width:100%; height:100%; border:0;">
             </Button>
           </div>
         </div>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   );
 }

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/SummaryPage.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import CustomFilter from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/CustomFilter";
 import SummaryHeader from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/SummaryHeader";
 import SurveyResultsTabs from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/SurveyResultsTabs";

apps/web/components/shared/CodeBlock.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { cn } from "@formbricks/lib/cn";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import Prism from "prismjs";
 import "prismjs/themes/prism.css";
@@ -9,15 +10,16 @@ import toast from "react-hot-toast";
 interface CodeBlockProps {
   children: React.ReactNode;
   language: string;
+  customCodeClass?: string;
 }
 
-const CodeBlock: React.FC<CodeBlockProps> = ({ children, language }) => {
+const CodeBlock: React.FC<CodeBlockProps> = ({ children, language, customCodeClass = "" }) => {
   useEffect(() => {
     Prism.highlightAll();
   }, [children]);
 
   return (
-    <div className="group relative mt-4 rounded-md text-sm  text-slate-200">
+    <div className="group relative mt-4 rounded-md text-sm text-slate-200">
       <DocumentDuplicateIcon
         className="absolute right-4 top-4 z-20 h-5 w-5 cursor-pointer text-slate-600 opacity-0 transition-all duration-150 group-hover:opacity-60"
         onClick={() => {
@@ -27,7 +29,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, language }) => {
         }}
       />
       <pre>
-        <code className={`language-${language} whitespace-pre-wrap`}>{children}</code>
+        <code className={cn(`language-${language} whitespace-pre-wrap`, customCodeClass)}>{children}</code>
       </pre>
     </div>
   );

packages/ui/index.tsx

@@ -59,6 +59,15 @@ export {
 } from "./components/Command";
 export { Calendar } from "./components/Calendar";
 export { DatePicker } from "./components/DatePicker";
+export {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./components/Dialog";
 
 /* Icons */
 export { AngryBirdRageIcon } from "./components/icons/AngryBirdRageIcon";