Fix: Dialogs mobile responsiveness throughout the Web App

vite/src/components/ui/dialog.tsx

@@ -60,7 +60,7 @@ function DialogContent({
         className={cn(
           `data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid  translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-3xl
           bg-stone-50
-          min-w-[15rem]
+          min-w-[200px]
           `,
           className
         )}

vite/src/views/customers/components/CreateCustomer.tsx

@@ -69,19 +69,19 @@ function CreateCustomer() {
           Customer
         </Button>
       </DialogTrigger>
-      <DialogContent className="w-[400px]">
+      <DialogContent className="w-[90%]">
         <DialogHeader>
           <DialogTitle>Create Customer</DialogTitle>
         </DialogHeader>
-        <div className="flex gap-2">
-          <div>
+        <div className="flex flex-col sm:flex-row gap-2">
+          <div className="w-full md:w-1/2">
             <FieldLabel>Name</FieldLabel>
             <Input
               value={fields.name}
               onChange={(e) => setFields({ ...fields, name: e.target.value })}
             />
           </div>
-          <div>
+          <div className="w-full md:w-1/2">
             <FieldLabel>ID</FieldLabel>
             <Input
               value={fields.id}

vite/src/views/developer/api-keys/components/CreateAPIKey.tsx

@@ -62,7 +62,7 @@ const CreateAPIKey = () => {
           Secret Key
         </Button>
       </DialogTrigger>
-      <DialogContent className="!max-w-lg min-w-md">
+      <DialogContent className="w-[90%]">
         <DialogHeader>
           <DialogTitle>Create Secret API Key</DialogTitle>
         </DialogHeader>

vite/src/views/main-sidebar/components/CreateNewOrg.tsx

@@ -65,13 +65,13 @@ export const CreateNewOrg = ({
       }}
     >
       <DialogTrigger asChild></DialogTrigger>
-      <DialogContent className="gap-0 p-0 rounded-xs min-w-[400px]">
+      <DialogContent className="gap-0 p-0 rounded-xs w-[90%]">
         <div className="p-6 flex flex-col gap-4">
           <DialogHeader>
             <DialogTitle>Create New Organization</DialogTitle>
           </DialogHeader>
-          <div className="flex gap-4">
-            <div>
+          <div className="flex flex-col sm:flex-row gap-4">
+            <div className="w-full">
               <FieldLabel>Name</FieldLabel>
               <Input
                 value={name}
@@ -83,7 +83,7 @@ export const CreateNewOrg = ({
                 }}
               />
             </div>
-            <div>
+            <div className="w-full">
               <FieldLabel>Slug</FieldLabel>
               <Input
                 value={slug}

vite/src/views/products/ProductConfig.tsx

@@ -19,8 +19,8 @@ export const ProductConfig = ({
 
   return (
     <>
-      <div className="flex w-full gap-2">
-        <div className="w-full">
+      <div className="flex flex-col sm:flex-row gap-2">
+        <div className="w-full md:w-1/2">
           <FieldLabel>Name</FieldLabel>
           <Input
             placeholder="eg. Starter Product"
@@ -34,7 +34,7 @@ export const ProductConfig = ({
             }}
           />
         </div>
-        <div className="w-full">
+        <div className="w-full md:w-1/2">
           <FieldLabel>ID</FieldLabel>
           <div className="flex items-center gap-2">
             <Input

vite/src/views/products/features/components/CreateFeature.tsx

@@ -90,7 +90,7 @@ export const CreateFeature = ({
 
   return (
     <>
-      <CustomDialogBody className="overflow-y-auto">
+      <CustomDialogBody className="overflow-y-auto w-[90%]">
         <DialogHeader>
           <DialogTitle>Create Feature</DialogTitle>
         </DialogHeader>

vite/src/views/products/features/components/FeatureConfig.tsx

@@ -86,7 +86,7 @@ export function FeatureConfig({
   };
 
   return (
-    <div className="flex flex-col gap-4 min-w-md max-w-md">
+    <div className="flex flex-col gap-4 min-w-[200px] max-w-md">
       <div className="text-sm text-t2 flex items-center gap-1">
         Features are the parts of your application that customers get access to
         when purchasing a product

vite/src/views/products/features/components/SelectFeatureType.tsx

@@ -38,7 +38,7 @@ export const SelectFeatureType = ({
   return (
     <div className="flex flex-col">
       <FieldLabel>Feature Type</FieldLabel>
-      <div className="grid grid-cols-2 gap-2">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <SelectType
           title="Metered"
           description="A usage-based feature that you want to track"

vite/src/views/products/features/credit-systems/CreateCreditSystem.tsx

@@ -74,7 +74,7 @@ function CreateCreditSystem() {
       <DialogTrigger asChild>
         <Button variant="add">Credit System</Button>
       </DialogTrigger>
-      <CustomDialogContent className="w-[500px] overflow-y-auto max-h-[500px]">
+      <CustomDialogContent className="w-[90%] overflow-y-auto max-h-[500px]">
         <CustomDialogBody>
           <DialogHeader>
             <DialogTitle>Create Credit System</DialogTitle>

vite/src/views/products/features/credit-systems/CreditSystemConfig.tsx

@@ -95,7 +95,7 @@ function CreditSystemConfig({
 
   return (
     <div className="flex flex-col gap-4 overflow-visible">
-      <div className="flex gap-2 w-full overflow-visible">
+      <div className="flex flex-col sm:flex-row gap-2 w-full overflow-visible">
         <div className="w-full">
           <FieldLabel>Name</FieldLabel>
           <Input

vite/src/views/products/products/components/CreateProductDialog.tsx

@@ -77,7 +77,7 @@ function CreateProduct({
           Product
         </Button>
       </DialogTrigger>
-      <DialogContent className="w-[500px]">
+      <DialogContent className="w-[90%]">
         <DialogTitle>Create Product</DialogTitle>
         <ProductConfig
           product={product}
@@ -93,7 +93,7 @@ function CreateProduct({
         )}
 
         <DialogFooter>
-          <div className="flex justify-between items-center gap-2 w-full mt-2">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 w-full mt-2">
             <div className="flex gap-4">
               <ToggleButton
                 disabled={product?.is_add_on}

vite/src/views/products/rewards/reward-config/CreateReward.tsx

@@ -61,7 +61,7 @@ function CreateReward() {
       <DialogTrigger asChild>
         <Button variant="add"> Reward</Button>
       </DialogTrigger>
-      <DialogContent className="w-[500px]">
+      <DialogContent className="w-[90%]">
         <DialogHeader>
           <DialogTitle>Create Reward</DialogTitle>
         </DialogHeader>

vite/src/views/products/rewards/reward-config/RewardConfig.tsx

@@ -34,15 +34,15 @@ export const RewardConfig = ({
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex items-center gap-2">
-        <div className="w-6/12">
+      <div className="flex flex-col sm:flex-row gap-2">
+        <div className="w-full">
           <FieldLabel description="Will be shown on receipt">Name</FieldLabel>
           <Input
             value={reward.name || ""}
             onChange={(e) => setReward({ ...reward, name: e.target.value })}
           />
         </div>
-        <div className="w-6/12">
+        <div className="w-full">
           <FieldLabel description="Used to identify reward in API">
             ID
           </FieldLabel>
@@ -55,7 +55,7 @@ export const RewardConfig = ({
           />
         </div>
       </div>
-      <div className="flex items-center w-full gap-2">
+      <div className="flex flex-col sm:flex-row gap-2">
         <div className="w-full">
           <FieldLabel>Promotional Code</FieldLabel>
           <Input

vite/src/views/products/rewards/reward-programs/CreateRewardProgram.tsx

@@ -65,7 +65,7 @@ function CreateRewardProgramModal() {
       <DialogTrigger asChild>
         <Button variant="add">Referral Program</Button>
       </DialogTrigger>
-      <DialogContent className="w-[500px]">
+      <DialogContent className="w-[90%]">
         <DialogHeader>
           <DialogTitle>Create Referral Program</DialogTitle>
         </DialogHeader>

vite/src/views/products/rewards/reward-programs/RewardProgramConfig.tsx

@@ -46,8 +46,8 @@ export const RewardProgramConfig = ({
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex items-center gap-2">
-        <div className="w-6/12">
+      <div className="flex flex-col sm:flex-row gap-2">
+        <div className="w-full">
           <FieldLabel>Program ID</FieldLabel>
           <Input
             value={rewardProgram.id || ""}
@@ -56,7 +56,7 @@ export const RewardProgramConfig = ({
             }
           />
         </div>
-        <div className="w-6/12">
+        <div className="w-full">
           <FieldLabel>Reward</FieldLabel>
           <Select
             value={rewardProgram.internal_reward_id}
@@ -77,8 +77,8 @@ export const RewardProgramConfig = ({
           </Select>
         </div>
       </div>
-      <div className="flex items-center gap-2">
-        <div className="w-6/12">
+      <div className="flex flex-col sm:flex-row gap-2">
+        <div className="w-full">
           <FieldLabel>Redeem On</FieldLabel>
           <Select
             defaultValue={RewardTriggerEvent.CustomerCreation}
@@ -102,7 +102,7 @@ export const RewardProgramConfig = ({
             </SelectContent>
           </Select>
         </div>
-        <div className="w-6/12">
+        <div className="w-full">
           <FieldLabel>Max Redemptions</FieldLabel>
           <Input
             type="number"