From 6595409098a50b64aaabf958c9951361c5305d2e Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> Date: Mon, 23 Jan 2023 11:56:33 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=8E=A8=20=20Update=20page?= =?UTF-8?q?=20bottom=20margins=20to=20be=20consistent=20(#21673)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix bottom of Sources and destinations settings page * Remove unused components * Remove H3 from titles * Fix layouts to have consistent page bottom margin * Set default spacing to 20px / xl * Remove extraneous padding from pages and let containers handle it * Check if running cloud app to add extra bottom spacing * Fix layout issues with connection Edit controls, move line rendering to the transformation cards * Set "saving" state in create controls to use the create button instead of having a different UI * Fix padding in DbtTransformationsCard --- .../FormPageContent.module.scss | 6 +- .../ConnectorBlocks/FormPageContent.tsx | 11 +++- .../src/components/base/Titles/Titles.tsx | 6 -- .../src/components/base/Titles/index.tsx | 2 +- .../MainPageWithScroll.module.scss | 7 ++- .../MainPageWithScroll/MainPageWithScroll.tsx | 5 +- .../ConnectionEditFormCard.module.scss | 9 ++- .../ConnectionEditFormCard.tsx | 5 +- .../ConnectionForm/CreateControls.module.scss | 5 ++ .../ConnectionForm/CreateControls.tsx | 40 ++----------- .../ConnectionForm/EditControls.module.scss | 28 +-------- .../ConnectionForm/EditControls.tsx | 47 +++++++-------- .../CollapsibleCard.module.scss | 3 - .../ui/CollapsibleCard/CollapsibleCard.tsx | 4 -- .../SettingsPage/SettingsPage.module.scss | 1 - .../components/ConnectorsView.module.scss | 3 - .../components/ConnectorsView.tsx | 59 +++++++++++-------- .../components/PageComponents.tsx | 20 +------ .../ConnectionReplicationPage.module.scss | 2 - .../ConnectionStatusPage.module.scss | 4 -- .../ConnectionStatusPage.tsx | 1 - .../ConnectionTransformationPage.module.scss | 12 +++- .../ConnectionTransformationPage.tsx | 5 +- .../CustomTransformationsCard.tsx | 1 - .../DbtCloudTransformationsCard.module.scss | 2 +- airbyte-webapp/src/scss/_variables.scss | 2 +- .../ConnectorDocumentationLayout.module.scss | 2 +- 27 files changed, 119 insertions(+), 173 deletions(-) create mode 100644 airbyte-webapp/src/components/connection/ConnectionForm/CreateControls.module.scss delete mode 100644 airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.module.scss delete mode 100644 airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss diff --git a/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.module.scss b/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.module.scss index a3166da8dda7..524972b7ce19 100644 --- a/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.module.scss +++ b/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.module.scss @@ -2,7 +2,11 @@ .container { margin: 13px auto 0; - padding-bottom: variables.$spacing-page-bottom; + padding-bottom: variables.$spacing-xl; + + &.cloud { + padding-bottom: variables.$spacing-page-bottom-cloud; + } &:not(.big) { width: 80%; diff --git a/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.tsx b/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.tsx index 64af7f776f97..1e1c4a051ec5 100644 --- a/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.tsx +++ b/airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.tsx @@ -1,6 +1,8 @@ import classNames from "classnames"; import { PropsWithChildren } from "react"; +import { isCloudApp } from "utils/app"; + import styles from "./FormPageContent.module.scss"; interface FormPageContentProps { @@ -8,7 +10,14 @@ interface FormPageContentProps { } const FormPageContent: React.FC> = ({ big, children }) => ( -
{children}
+
+ {children} +
); export default FormPageContent; diff --git a/airbyte-webapp/src/components/base/Titles/Titles.tsx b/airbyte-webapp/src/components/base/Titles/Titles.tsx index 9d2a5ee0fd9d..50630f7ce478 100644 --- a/airbyte-webapp/src/components/base/Titles/Titles.tsx +++ b/airbyte-webapp/src/components/base/Titles/Titles.tsx @@ -19,12 +19,6 @@ const H1 = styled.h1` margin: 0; `; -/** @deprecated Use `` */ -export const H3 = styled(H1).attrs({ as: "h3" })` - font-size: 20px; - line-height: 24px; -`; - /** @deprecated Use `` */ export const H5 = styled(H1).attrs({ as: "h5" })` font-size: ${({ theme }) => theme.h5?.fontSize || "16px"}; diff --git a/airbyte-webapp/src/components/base/Titles/index.tsx b/airbyte-webapp/src/components/base/Titles/index.tsx index 502ba2ea7036..c6f9a9079c5f 100644 --- a/airbyte-webapp/src/components/base/Titles/index.tsx +++ b/airbyte-webapp/src/components/base/Titles/index.tsx @@ -1 +1 @@ -export { H3, H5 } from "./Titles"; +export { H5 } from "./Titles"; diff --git a/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.module.scss b/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.module.scss index 22c55a7f45fb..185526591e75 100644 --- a/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.module.scss +++ b/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.module.scss @@ -9,6 +9,7 @@ } .contentContainer { + flex: 1; max-width: 100%; overflow-x: auto; padding-top: variables.$spacing-lg; @@ -17,6 +18,10 @@ .content { overflow-y: auto; height: 100%; - padding: 0 variables.$spacing-xl variables.$spacing-page-bottom; + padding: 0 variables.$spacing-xl variables.$spacing-xl; min-width: variables.$main-page-content-min-width; + + &.cloud { + padding-bottom: variables.$spacing-page-bottom-cloud; + } } diff --git a/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.tsx b/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.tsx index 047e1e14dbe1..71091c50b3cb 100644 --- a/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.tsx +++ b/airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.tsx @@ -1,5 +1,8 @@ +import classNames from "classnames"; import React from "react"; +import { isCloudApp } from "utils/app"; + import styles from "./MainPageWithScroll.module.scss"; /** @@ -20,7 +23,7 @@ export const MainPageWithScroll: React.FC = ({ headTitl {pageTitle}
-
{children}
+
{children}
); diff --git a/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.module.scss b/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.module.scss index ce45b41bb4f7..343ffae519be 100644 --- a/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.module.scss +++ b/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.module.scss @@ -1,5 +1,12 @@ +@use "scss/colors"; @use "scss/variables"; .formCard { - padding: 22px 27px variables.$spacing-xl 24px; + padding: variables.$spacing-xl; +} + +.editControls { + border-top: variables.$border-thin solid colors.$grey-100; + margin: 0 -#{variables.$spacing-xl}; + padding: variables.$spacing-xl variables.$spacing-xl 0; } diff --git a/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.tsx b/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.tsx index a0be5283d333..3533cafa8a4a 100644 --- a/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.tsx +++ b/airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.tsx @@ -13,7 +13,6 @@ import EditControls from "../ConnectionForm/EditControls"; import styles from "./ConnectionEditFormCard.module.scss"; interface FormCardProps extends CollapsibleCardProps { - bottomSeparator?: boolean; form: FormikConfig; submitDisabled?: boolean; } @@ -21,7 +20,6 @@ interface FormCardProps extends CollapsibleCardProps { export const ConnectionEditFormCard = ({ children, form, - bottomSeparator = true, submitDisabled, ...props }: React.PropsWithChildren>) => { @@ -45,10 +43,9 @@ export const ConnectionEditFormCard = ({
{children} -
+
{mode !== "readonly" && ( theme.darkPrimaryColor}; - justify-content: center; -`; - -const Loader = styled.div` - margin-right: 10px; -`; - const Success = styled(StatusIcon)` width: 26px; min-width: 26px; @@ -61,19 +44,8 @@ const ErrorText = styled.div` `; const CreateControls: React.FC = ({ isSubmitting, errorMessage, isValid }) => { - if (isSubmitting) { - return ( - - - - - - - ); - } - return ( - + {errorMessage ? ( @@ -86,11 +58,11 @@ const CreateControls: React.FC = ({ isSubmitting, errorMess
)}
-
- + ); }; diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.module.scss b/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.module.scss index 2afd4f0946a3..1610ff1d8d2c 100644 --- a/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.module.scss +++ b/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.module.scss @@ -1,29 +1,5 @@ -@use "scss/colors"; @use "scss/variables"; -.content { - display: flex; - justify-content: flex-end; - align-items: center; - flex-direction: row; - margin-top: variables.$spacing-lg; - gap: variables.$spacing-lg; - padding: variables.$spacing-sm; -} - -.controlButton { - margin-left: variables.$spacing-md; -} - -// currently only implemented on transformation view form card, margins are specific to that implementation -// todo: standardize the margin sizes here -.line { - min-width: 100%; - height: variables.$border-thin; - background: colors.$grey-100; - margin: variables.$spacing-lg -27px 0 -24px; -} - -.buttonsContainer { - display: flex; +.container { + margin-top: variables.$spacing-md; } diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.tsx b/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.tsx index fc78785d6458..6fa6fe33cd1b 100644 --- a/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.tsx +++ b/airbyte-webapp/src/components/connection/ConnectionForm/EditControls.tsx @@ -2,6 +2,7 @@ import React from "react"; import { FormattedMessage } from "react-intl"; import { Button } from "components/ui/Button"; +import { FlexContainer } from "components/ui/Flex"; import styles from "./EditControls.module.scss"; import { ResponseMessage } from "./ResponseMessage"; @@ -14,7 +15,6 @@ interface EditControlProps { successMessage?: React.ReactNode; errorMessage?: React.ReactNode; enableControls?: boolean; - withLine?: boolean; } const EditControls: React.FC = ({ @@ -25,33 +25,28 @@ const EditControls: React.FC = ({ successMessage, errorMessage, enableControls, - withLine, }) => { return ( - <> - {withLine &&
} -
- -
- - -
-
- + + + + + + + ); }; diff --git a/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.module.scss b/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.module.scss deleted file mode 100644 index 87ff85fde155..000000000000 --- a/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.collapsibleCard { - margin-bottom: 10px; -} diff --git a/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.tsx b/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.tsx index 4b0dfdaeec9d..52b12607e2bd 100644 --- a/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.tsx +++ b/airbyte-webapp/src/components/ui/CollapsibleCard/CollapsibleCard.tsx @@ -1,14 +1,11 @@ import { faChevronRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import classNames from "classnames"; import React from "react"; import { useToggle } from "react-use"; import styled from "styled-components"; import { Card } from "components/ui/Card"; -import styles from "./CollapsibleCard.module.scss"; - const CardHeader = styled.div` display: flex; justify-content: space-between; @@ -40,7 +37,6 @@ export const CollapsibleCard: React.FC = ({ return ( {title} diff --git a/airbyte-webapp/src/pages/SettingsPage/SettingsPage.module.scss b/airbyte-webapp/src/pages/SettingsPage/SettingsPage.module.scss index a756f2ddb779..997a2399432e 100644 --- a/airbyte-webapp/src/pages/SettingsPage/SettingsPage.module.scss +++ b/airbyte-webapp/src/pages/SettingsPage/SettingsPage.module.scss @@ -3,7 +3,6 @@ .content { display: flex; flex-direction: row; - padding-bottom: variables.$spacing-lg; } .mainView { diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss deleted file mode 100644 index 17d92ee1b1e6..000000000000 --- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.buttonsContainer { - display: flex; -} diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx index 21030a199977..fa40c8a3aedb 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx @@ -3,6 +3,8 @@ import { FormattedMessage } from "react-intl"; import { CellProps } from "react-table"; import { HeadTitle } from "components/common/HeadTitle"; +import { FlexContainer } from "components/ui/Flex"; +import { Heading } from "components/ui/Heading"; import { Table } from "components/ui/Table"; import { Connector, ConnectorDefinition } from "core/domain/connector"; @@ -12,10 +14,9 @@ import { FeatureItem, useFeature } from "hooks/services/Feature"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; import ConnectorCell from "./ConnectorCell"; -import styles from "./ConnectorsView.module.scss"; import CreateConnector from "./CreateConnector"; import ImageCell from "./ImageCell"; -import { Block, FormContentTitle, Title } from "./PageComponents"; +import { FormContentTitle } from "./PageComponents"; import UpgradeAllButton from "./UpgradeAllButton"; import VersionCell from "./VersionCell"; @@ -125,7 +126,7 @@ const ConnectorsView: React.FC = ({ const renderHeaderControls = (section: "used" | "available") => ((section === "used" && usedConnectorsDefinitions.length > 0) || (section === "available" && usedConnectorsDefinitions.length === 0)) && ( -
+ {allowUploadCustomImage && } {(hasNewConnectorVersion || isUpdateSuccess) && allowUpdateConnectors && ( = ({ onUpdate={onUpdate} /> )} -
+ ); return ( @@ -143,31 +144,37 @@ const ConnectorsView: React.FC = ({ - {usedConnectorsDefinitions.length > 0 && ( - - - <FormattedMessage id={type === "sources" ? "admin.manageSource" : "admin.manageDestination"} /> - {renderHeaderControls("used")} - + + {usedConnectorsDefinitions.length > 0 && ( + + + + + + {renderHeaderControls("used")} + + + + )} + + + + + + + {renderHeaderControls("available")} +
- - )} - - - - <FormattedMessage id={type === "sources" ? "admin.availableSource" : "admin.availableDestinations"} /> - {renderHeaderControls("available")} - -
- + + ); }; diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx index 31a9eaff246d..ef7827175dd4 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx @@ -1,27 +1,11 @@ import styled from "styled-components"; -import { H5 } from "components/base/Titles"; - -const Title = styled(H5)` - color: ${({ theme }) => theme.darkPrimaryColor}; - margin-bottom: 19px; - display: flex; - justify-content: space-between; - align-items: center; -`; - -const Block = styled.div` - margin-bottom: 56px; -`; - -const FormContent = styled.div` +export const FormContent = styled.div` width: 253px; margin: -10px 0 -10px 200px; position: relative; `; -const FormContentTitle = styled(FormContent)` +export const FormContentTitle = styled(FormContent)` margin: 0 0 0 200px; `; - -export { Title, Block, FormContent, FormContentTitle }; diff --git a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss index fc965f61fed9..1bba26e32786 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss +++ b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss @@ -1,8 +1,6 @@ @use "scss/variables"; .content { - padding-bottom: variables.$spacing-md; - > form { display: flex; flex-direction: column; diff --git a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss index 48419e552f16..8badacf0e855 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss +++ b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss @@ -31,10 +31,6 @@ } } -.contentCard { - margin-bottom: variables.$spacing-xl; -} - .footer { width: 100%; display: flex; diff --git a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx index 29bcdb7986bb..c5f87cbf6a4b 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx +++ b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx @@ -159,7 +159,6 @@ export const ConnectionStatusPage: React.FC = () => { return ( <> diff --git a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.module.scss b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.module.scss index 6903e64a247b..681bc32cc405 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.module.scss +++ b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.module.scss @@ -1,7 +1,17 @@ +@use "scss/variables"; + .content { max-width: 1073px; margin: 0 auto; - padding-bottom: 10px; + + & > fieldset { + margin: 0; + padding: 0; + border: 0; + display: flex; + flex-direction: column; + gap: variables.$spacing-lg; + } } .customCard { diff --git a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx index 17bd026c7c27..40c9ee19e2b9 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx +++ b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx @@ -61,10 +61,7 @@ export const ConnectionTransformationPage: React.FC = () => { return (
-
+
{supportsNormalization && } {supportsDbt && } {supportsCloudDbtIntegration && } diff --git a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/CustomTransformationsCard.tsx b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/CustomTransformationsCard.tsx index 0b8a0b8455f3..88a58210773c 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/CustomTransformationsCard.tsx +++ b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/CustomTransformationsCard.tsx @@ -28,7 +28,6 @@ export const CustomTransformationsCard: React.FC<{ title={} collapsible - bottomSeparator form={{ initialValues, enableReinitialize: true, diff --git a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/DbtCloudTransformationsCard.module.scss b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/DbtCloudTransformationsCard.module.scss index 09620779260b..9d9a85316dbc 100644 --- a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/DbtCloudTransformationsCard.module.scss +++ b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/DbtCloudTransformationsCard.module.scss @@ -5,7 +5,7 @@ display: flex; flex-direction: column; align-items: center; - padding: 25px 25px 22px; + padding: variables.$spacing-xl; background-color: colors.$grey-50; } diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss index 5f5d103e38b0..19c967957ab5 100644 --- a/airbyte-webapp/src/scss/_variables.scss +++ b/airbyte-webapp/src/scss/_variables.scss @@ -26,7 +26,7 @@ $spacing-md: 10px; $spacing-lg: 15px; $spacing-xl: 20px; $spacing-2xl: 40px; -$spacing-page-bottom: 150px; +$spacing-page-bottom-cloud: 88px; $main-page-content-min-width: 960px; $width-size-menu: 93px; diff --git a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.module.scss b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.module.scss index 626cae0e8051..41c28fbedb93 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.module.scss +++ b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.module.scss @@ -3,7 +3,7 @@ .leftPanel { > *:last-child { - padding-bottom: variables.$spacing-page-bottom; + padding-bottom: variables.$spacing-page-bottom-cloud; } }