fix: UI fixes (#2653)

Co-authored-by: Johannes <johannes@formbricks.com>

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionSettingsTab.tsx

@@ -200,7 +200,7 @@ export const ActionSettingsTab = ({
             This is a code action. Please make changes in your code base.
           </p>
         ) : actionClass.type === "noCode" ? (
-          <>
+          <div className="max-h-60 overflow-auto">
             <div>
               <Label>Select By</Label>
             </div>
@@ -225,7 +225,7 @@ export const ActionSettingsTab = ({
               setIsInnerHtml={setIsInnerHtml}
               register={register}
             />
-          </>
+          </div>
         ) : actionClass.type === "automatic" ? (
           <p className="text-sm text-slate-600">
             This action was created automatically. You cannot make changes to it.

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

@@ -205,7 +205,7 @@ export const MainNavigation = ({
       {product && (
         <aside
           className={cn(
-            "z-20 flex flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100",
+            "z-40 flex flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100",
             !isCollapsed ? "w-sidebar-collapsed" : "w-sidebar-expanded",
             environment.type === "development" ? `h-[calc(100vh-1.25rem)]` : "h-screen"
           )}>

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

@@ -11,7 +11,7 @@ interface SideBarProps {
 
 export const TopControlBar = ({ environment, environments }: SideBarProps) => {
   return (
-    <div className="fixed inset-0 top-0 z-10 flex h-14 w-full items-center justify-end bg-slate-50 px-6">
+    <div className="fixed inset-0 top-0 z-30 flex h-14 w-full items-center justify-end bg-slate-50 px-6">
       <div className="shadow-xs z-10">
         <div className="flex w-fit space-x-2 py-2">
           <WidgetStatusIndicator environment={environment} type="mini" />

apps/web/app/(app)/environments/[environmentId]/settings/(team)/members/components/BulkInviteTab.tsx

@@ -71,7 +71,7 @@ export const BulkInviteTab = ({ setOpen, onSubmit, canDoRoleManagement }: BulkIn
   return (
     <div className="space-y-4">
       <div
-        className="relative flex h-52 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-gray-300"
+        className="relative flex h-52 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-slate-300 bg-slate-50 transition-colors  hover:bg-slate-100"
         onClick={() => fileInputRef.current?.click()}>
         {csvFile ? (
           <XIcon
@@ -97,16 +97,18 @@ export const BulkInviteTab = ({ setOpen, onSubmit, canDoRoleManagement }: BulkIn
           </Alert>
         )}
       </div>
-      <div className="flex justify-end pt-6">
+      <div className="flex justify-end">
         <div className="flex space-x-2">
           <Link
             download
             href="/sample-csv/formbricks-team-members-template.csv"
             target="_blank"
             rel="noopener noreferrer">
-            <Button variant="minimal">Download CSV template</Button>
+            <Button variant="minimal" size="sm">
+              Download CSV template
+            </Button>
           </Link>
-          <Button onClick={onImport} variant="darkCTA" disabled={!csvFile}>
+          <Button onClick={onImport} size="sm" variant="darkCTA" disabled={!csvFile}>
             Import
           </Button>
         </div>

apps/web/app/(app)/environments/[environmentId]/settings/(team)/members/components/IndividualInviteTab.tsx

@@ -77,7 +77,7 @@ export const IndividualInviteTab = ({
           </div>
         </div>
       </div>
-      <div className="flex justify-end p-6">
+      <div className="flex justify-end pt-4">
         <div className="flex space-x-2">
           <Button
             size="sm"

packages/ui/Actions/components/PageUrlSelector.tsx

@@ -1,7 +1,7 @@
 import { Label } from "@radix-ui/react-dropdown-menu";
-import clsx from "clsx";
 import { Control, Controller, UseFormRegister } from "react-hook-form";
 
+import { cn } from "@formbricks/lib/cn";
 import { TActionClass } from "@formbricks/types/actionClasses";
 
 import { AdvancedOptionToggle } from "../../AdvancedOptionToggle";
@@ -42,9 +42,9 @@ export const PageUrlSelector = ({
       title="Page URL"
       description="If a user visits a specific URL"
       childBorder={true}>
-      <div className="col-span-1 space-y-3 p-4">
-        <div className="grid grid-cols-3 gap-x-8">
-          <div className="col-span-1">
+      <div className="col-span-1 w-full space-y-3 p-4">
+        <div className="flex w-full items-end gap-2">
+          <div>
             <Label>URL</Label>
             <Controller
               name="noCodeConfig.pageUrl.rule"
@@ -66,7 +66,7 @@ export const PageUrlSelector = ({
               )}
             />
           </div>
-          <div className="col-span-2 flex items-end">
+          <div className="flex flex-1 items-end">
             <Input
               type="text"
               className="bg-white"
@@ -81,7 +81,7 @@ export const PageUrlSelector = ({
             Enter a URL to see if a user visiting it would be tracked.
           </div>
           <div className=" rounded bg-slate-50">
-            <div className="mt-1 flex">
+            <div className="mt-1 flex items-end">
               <Input
                 type="text"
                 value={testUrl}
@@ -90,7 +90,7 @@ export const PageUrlSelector = ({
                   setTestUrl(e.target.value);
                   setIsMatch("default");
                 }}
-                className={clsx(
+                className={cn(
                   isMatch === "yes"
                     ? "border-green-500 bg-green-50"
                     : isMatch === "no"

packages/ui/Modal/index.tsx

@@ -50,8 +50,7 @@ const DialogContent = React.forwardRef<
           `${noPadding ? "" : "px-4 pb-4 pt-5 sm:p-6"}`,
           "data-[state='closed']:animate-fadeOut data-[state='open']:animate-fadeIn",
           size && sizeClassName && sizeClassName[size],
-          className,
-          "max-h-screen overflow-y-auto"
+          className
         )}
         {...props}
         onPointerDownOutside={(e) => {

packages/ui/SingleResponseCard/index.tsx

@@ -301,7 +301,7 @@ export const SingleResponseCard = ({
     <div className={clsx("group relative", isOpen && "min-h-[300px]")}>
       <div
         className={clsx(
-          "relative z-30 my-6 rounded-xl border border-slate-200 bg-white shadow-sm transition-all",
+          "relative z-20 my-6 rounded-xl border border-slate-200 bg-white shadow-sm transition-all",
           pageType === "response" &&
             (isOpen
               ? "w-3/4"