fix responsiveness

Author: sanjaypinna

app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx

@@ -350,8 +350,8 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
             </Button>
           </Sheet.Trigger>
           <Sheet.Content side="bottom">
-            <div className=" flex  flex-col gap-6 p-10">
-              <div className="flex items-center justify-between">
+            <div className=" flex flex-col gap-6 p-10">
+              <div className="flex flex-wrap items-center justify-between gap-3">
                 <Text variant="bodyLg">Select Resource</Text>
                 <div className="flex items-center gap-3">
                   <Button
@@ -422,8 +422,8 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
             )}
           </div>
           <div className="flex flex-col gap-6">
-            <div className="flex  gap-6">
-              <div className=" w-4/5">
+            <div className="flex flex-wrap  gap-6">
+              <div className="w-full lg:w-4/5">
                 <TextField
                   value={accessModelData.name}
                   onChange={(e) => handleChange('name', e)}
@@ -435,7 +435,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
                 />
               </div>
               <Select
-                className=" w-1/6"
+                className="w-full lg:w-1/6"
                 name={'permissions'}
                 options={[
                   { label: 'Public', value: 'PUBLIC' },
@@ -460,10 +460,9 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
             />
           </div>
 
-          <div className="flex items-end gap-6">
-            <div className={cn(' w-3/4', styles.combobox)}>
+          <div className="flex flex-wrap items-end gap-6">
+            <div className={cn('w-full lg:w-3/4', styles.combobox)}>
               <Combobox
-                // displaySelected
                 label={'Select Fields of the Resource'}
                 list={availableResources}
                 selectedValue={selectedFields}

app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx

@@ -147,9 +147,9 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
           </span>
         </Button>
       </div>
-      <div className="flex flex-wrap gap-6 px-8">
+      <div className="flex flex-wrap gap-6 lg:px-8 ">
         <div className="flex w-full flex-col gap-4 2xl:w-3/5">
-          <div className="relative mr-4 flex items-center">
+          <div className="relative mr-4 flex flex-wrap  items-center">
             <div className={cn('mt-1 w-full', styles.combobox)}>
               <Combobox
                 displaySelected
@@ -161,7 +161,7 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
                 onChange={(e: any) => handleFieldSelection(e)}
               />
             </div>
-            <div className="absolute right-0" style={{ top: '1px' }}>
+            <div className="right-0 lg:absolute" style={{ top: '1px' }}>
               <Checkbox
                 name="Select All Fields"
                 checked={selectAllFields}
@@ -185,7 +185,7 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
                 Select All
               </Checkbox>
             </div>
-            <div className={cn('flex gap-6', styles.accessModelEdit)}>
+            <div className={cn('flex flex-wrap gap-6', styles.accessModelEdit)}>
               <TextField type="number" label="From Row Number" name="fromRow" />
               <TextField type="number" label="To Row Number" name="toRow" />
             </div>