diff --git a/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss b/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss
index 4f7c81dcc15d..5fba7ee3d42e 100644
--- a/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss
+++ b/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss
@@ -7,6 +7,7 @@
font-size: 14px;
padding: 25px;
white-space: pre-line;
+ overflow: auto;
}
.buttonContent {
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.module.scss
index 7d08c6af8907..8b22bcc4a617 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.module.scss
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.module.scss
@@ -1,7 +1,7 @@
@use "scss/variables";
@use "scss/colors";
-.inputForm {
+.inputFormBody {
gap: variables.$spacing-lg;
display: flex;
flex-direction: column;
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.tsx
index 071596439254..35060995aa0f 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.tsx
@@ -181,118 +181,117 @@ const InputModal = ({
id={inputInEditing.isNew ? "connectorBuilder.inputModal.newTitle" : "connectorBuilder.inputModal.editTitle"}
/>
}
+ wrapIn={Form}
onClose={onClose}
>
-
+ )}
+ >
+ ) : (
+
+ {isInferredInputOverride ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+
+ {!inputInEditing.isNew && !inputInEditing.isInferredInputOverride && (
+
+
+
+ )}
+
+
+
);
};
diff --git a/airbyte-webapp/src/components/ui/Modal/Modal.module.scss b/airbyte-webapp/src/components/ui/Modal/Modal.module.scss
index 53972d171515..4c0bee56c610 100644
--- a/airbyte-webapp/src/components/ui/Modal/Modal.module.scss
+++ b/airbyte-webapp/src/components/ui/Modal/Modal.module.scss
@@ -26,13 +26,15 @@
}
.modalPanel {
- margin-left: auto;
- margin-right: auto;
+ max-height: 100%;
+ display: flex;
}
.card {
margin-left: variables.$width-size-menu;
max-width: calc(100vw - #{variables.$width-size-menu} - #{variables.$spacing-lg} * 2);
+ display: flex;
+ flex-direction: column;
&.sm {
width: variables.$width-modal-sm;
diff --git a/airbyte-webapp/src/components/ui/Modal/Modal.tsx b/airbyte-webapp/src/components/ui/Modal/Modal.tsx
index 989db1916537..8e323b010ce8 100644
--- a/airbyte-webapp/src/components/ui/Modal/Modal.tsx
+++ b/airbyte-webapp/src/components/ui/Modal/Modal.tsx
@@ -12,6 +12,10 @@ export interface ModalProps {
cardless?: boolean;
size?: "sm" | "md" | "lg" | "xl";
testId?: string;
+ /**
+ * If specified, the full content of the modal including header, body and footer is wrapped in this component (only a class name prop might be set on the component)
+ */
+ wrapIn?: React.FC>;
}
const cardStyleBySize = {
@@ -28,6 +32,7 @@ export const Modal: React.FC> = ({
onClose,
cardless,
testId,
+ wrapIn,
}) => {
const [isOpen, setIsOpen] = useState(true);
@@ -36,10 +41,12 @@ export const Modal: React.FC> = ({
onClose?.();
};
+ const Wrapper = wrapIn || "div";
+
return (
);
};
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
index e3219209729d..4378779822c1 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
@@ -57,132 +57,130 @@ const CreateConnectorModal: React.FC = ({ onClose, on
}}
>
{({ isSubmitting, isValid, dirty }) => (
- }>
-
+
+
+
+
+
+
)}
diff --git a/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss b/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss
index f1a18c3460ef..f92ba4407e92 100644
--- a/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss
+++ b/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss
@@ -1,7 +1,6 @@
@use "scss/variables";
.modalBody {
- overflow: unset;
min-width: 500px;
}