Remove max height in form and update styles so content adjusts better…

… to container/iframe
openintegrations · Oct 30, 2024 · e90d202 · e90d202
1 parent 4fa11e4
commit e90d202
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/packages/engine-frontend/hocs/WithConnectorConnect.tsx b/packages/engine-frontend/hocs/WithConnectorConnect.tsx
@@ -150,7 +150,7 @@ export const WithConnectorConnect = ({
         if (err === CANCELLATION_TOKEN) {
           return
         }
-        console.log(ccfg.connector.displayName + ' connection error:',err)
+        console.log(ccfg.connector.displayName + ' connection error:', err)
         toast({
           title: `Failed to connect to ${ccfg.connector.displayName}`,
           // description: `${err}`,
@@ -196,17 +196,21 @@ export const WithConnectorConnect = ({
         label: resource ? 'Reconnect' : 'Connect',
       })}
 
-      <DialogContent className="max-h-[600px] overflow-visible">
-        <DialogHeader>
+      <DialogContent
+        className="flex flex-col overflow-visible"
+        style={{
+          maxHeight: 'min(90vh, 700px)',
+        }}>
+        <DialogHeader className="flex-shrink-0">
           <DialogTitle>
             <div className="flex items-center">
               <span className="mr-2">
                 Connect to {ccfg.connector.displayName}
               </span>
               {ccfg.connector.name === 'greenhouse' && (
                 <div className="relative inline-block">
-                  <InfoIcon className="h-5 w-5 cursor-help text-gray-500 peer" />
-                  <div className="absolute bottom-full left-1/2 mb-2 w-64 -translate-x-1/2 rounded-md bg-[#272731] p-2 text-sm text-white opacity-0 transition-opacity peer-hover:opacity-100 pointer-events-none">
+                  <InfoIcon className="peer h-5 w-5 cursor-help text-gray-500" />
+                  <div className="pointer-events-none absolute bottom-full left-1/2 mb-2 w-64 -translate-x-1/2 rounded-md bg-[#272731] p-2 text-sm text-white opacity-0 transition-opacity peer-hover:opacity-100">
                     <p className="italic">
                       Generate a custom API key with{' '}
                       <a
@@ -229,23 +233,23 @@ export const WithConnectorConnect = ({
             </DialogDescription>
           )}
         </DialogHeader>
-        <SchemaForm
-          ref={formRef}
-          schema={z.object({})}
-          jsonSchemaTransform={(schema) =>
-            ccfg.connector.schemas.resourceSettings ?? schema
-          }
-          formData={{}}
-          // formData should be non-null at this point, we should fix the typing
-          loading={connect.isLoading}
-          onSubmit={({formData}) => {
-            console.log('resource form submitted', formData)
-            connect.mutate({connectorConfigId: ccfg.id, settings: formData})
-          }}
-          hideSubmitButton
-        />
-        {/* Children here */}
-        <DialogFooter>
+        <div className="overflow-y-auto">
+          <SchemaForm
+            ref={formRef}
+            schema={z.object({})}
+            jsonSchemaTransform={(schema) =>
+              ccfg.connector.schemas.resourceSettings ?? schema
+            }
+            formData={{}}
+            loading={connect.isLoading}
+            onSubmit={({formData}) => {
+              console.log('resource form submitted', formData)
+              connect.mutate({connectorConfigId: ccfg.id, settings: formData})
+            }}
+            hideSubmitButton
+          />
+        </div>
+        <DialogFooter className="flex-shrink-0">
           <Button
             disabled={connect.isLoading}
             onClick={() => formRef.current?.submit()}

diff --git a/packages/ui/components/SchemaForm.tsx b/packages/ui/components/SchemaForm.tsx
@@ -101,7 +101,7 @@ export const SchemaForm = React.forwardRef(function SchemaForm<
         'schema-form',
         loading && 'loading',
         props.className,
-        'max-h-[450px] overflow-y-auto',
+        'overflow-y-auto',
       )}
       schema={jsonSchema}
       validator={validator}