From cfcddf13c83a3e5c8c041fc69d3ee6c933271ec6 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Mon, 19 Dec 2022 19:09:11 +0530
Subject: [PATCH] UI : Fix alignment and spacing issue (#9379)

* Fix alignment and spacing issue

* fix spacing issue while adding and editing ingestion

* added center support in PageLayoutV1
---
 .../DatasetDetails.component.tsx              | 141 +++++++++---------
 .../components/containers/PageLayoutV1.tsx    |  14 +-
 .../AddIngestionPage.component.tsx            |  80 +++++-----
 .../EditConnectionFormPage.component.tsx      |  49 +++---
 .../EditIngestionPage.component.tsx           |  84 ++++++-----
 .../ui/src/styles/components/size.less        |   3 +
 .../main/resources/ui/src/styles/spacing.less |   4 +
 7 files changed, 201 insertions(+), 174 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
index 0d6ddeb75b5..8bc4b882e98 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Col, Row } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { isEqual, isNil, isUndefined } from 'lodash';
@@ -665,75 +666,77 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
           />
           <div className="tw-flex-grow tw-flex tw-flex-col tw-py-4">
             {activeTab === 1 && (
-              <div
-                className="tab-details-container tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full"
-                id="schemaDetails">
-                <div className="tw-col-span-3">
-                  <Description
-                    description={description}
-                    entityFieldTasks={getEntityFieldThreadCounts(
-                      EntityField.DESCRIPTION,
-                      entityFieldTaskCount
-                    )}
-                    entityFieldThreads={getEntityFieldThreadCounts(
-                      EntityField.DESCRIPTION,
-                      entityFieldThreadCount
-                    )}
-                    entityFqn={datasetFQN}
-                    entityName={entityName}
-                    entityType={EntityType.TABLE}
-                    hasEditAccess={
-                      tablePermissions.EditAll ||
-                      tablePermissions.EditDescription
-                    }
-                    isEdit={isEdit}
-                    isReadOnly={deleted}
-                    owner={owner}
-                    onCancel={onCancel}
-                    onDescriptionEdit={onDescriptionEdit}
-                    onDescriptionUpdate={onDescriptionUpdate}
-                    onEntityFieldSelect={onEntityFieldSelect}
-                    onThreadLinkSelect={onThreadLinkSelect}
-                  />
-                </div>
-                <div className="tw-col-span-1 tw-border tw-border-main tw-rounded-md">
-                  <FrequentlyJoinedTables
-                    header="Frequently Joined Tables"
-                    tableList={getFrequentlyJoinedWithTables()}
-                  />
-                </div>
-                <div className="tw-col-span-full">
-                  <SchemaTab
-                    columnName={getPartialNameFromTableFQN(
-                      datasetFQN,
-                      [FqnPart['Column']],
-                      FQN_SEPARATOR_CHAR
-                    )}
-                    columns={columns}
-                    entityFieldTasks={getEntityFieldThreadCounts(
-                      EntityField.COLUMNS,
-                      entityFieldTaskCount
-                    )}
-                    entityFieldThreads={getEntityFieldThreadCounts(
-                      EntityField.COLUMNS,
-                      entityFieldThreadCount
-                    )}
-                    entityFqn={datasetFQN}
-                    hasDescriptionEditAccess={
-                      tablePermissions.EditAll ||
-                      tablePermissions.EditDescription
-                    }
-                    hasTagEditAccess={
-                      tablePermissions.EditAll || tablePermissions.EditTags
-                    }
-                    isReadOnly={deleted}
-                    joins={tableJoinData.columnJoins as ColumnJoins[]}
-                    tableConstraints={tableDetails.tableConstraints}
-                    onEntityFieldSelect={onEntityFieldSelect}
-                    onThreadLinkSelect={onThreadLinkSelect}
-                    onUpdate={onColumnsUpdate}
-                  />
-                </div>
+              <div className="tab-details-container">
+                <Row id="schemaDetails">
+                  <Col span={17}>
+                    <Description
+                      description={description}
+                      entityFieldTasks={getEntityFieldThreadCounts(
+                        EntityField.DESCRIPTION,
+                        entityFieldTaskCount
+                      )}
+                      entityFieldThreads={getEntityFieldThreadCounts(
+                        EntityField.DESCRIPTION,
+                        entityFieldThreadCount
+                      )}
+                      entityFqn={datasetFQN}
+                      entityName={entityName}
+                      entityType={EntityType.TABLE}
+                      hasEditAccess={
+                        tablePermissions.EditAll ||
+                        tablePermissions.EditDescription
+                      }
+                      isEdit={isEdit}
+                      isReadOnly={deleted}
+                      owner={owner}
+                      onCancel={onCancel}
+                      onDescriptionEdit={onDescriptionEdit}
+                      onDescriptionUpdate={onDescriptionUpdate}
+                      onEntityFieldSelect={onEntityFieldSelect}
+                      onThreadLinkSelect={onThreadLinkSelect}
+                    />
+                  </Col>
+                  <Col offset={1} span={6}>
+                    <div className="border-1 border-main rounded-6">
+                      <FrequentlyJoinedTables
+                        header="Frequently Joined Tables"
+                        tableList={getFrequentlyJoinedWithTables()}
+                      />
+                    </div>
+                  </Col>
+                  <Col className="m-t-md" span={24}>
+                    <SchemaTab
+                      columnName={getPartialNameFromTableFQN(
+                        datasetFQN,
+                        [FqnPart['Column']],
+                        FQN_SEPARATOR_CHAR
+                      )}
+                      columns={columns}
+                      entityFieldTasks={getEntityFieldThreadCounts(
+                        EntityField.COLUMNS,
+                        entityFieldTaskCount
+                      )}
+                      entityFieldThreads={getEntityFieldThreadCounts(
+                        EntityField.COLUMNS,
+                        entityFieldThreadCount
+                      )}
+                      entityFqn={datasetFQN}
+                      hasDescriptionEditAccess={
+                        tablePermissions.EditAll ||
+                        tablePermissions.EditDescription
+                      }
+                      hasTagEditAccess={
+                        tablePermissions.EditAll || tablePermissions.EditTags
+                      }
+                      isReadOnly={deleted}
+                      joins={tableJoinData.columnJoins as ColumnJoins[]}
+                      tableConstraints={tableDetails.tableConstraints}
+                      onEntityFieldSelect={onEntityFieldSelect}
+                      onThreadLinkSelect={onThreadLinkSelect}
+                      onUpdate={onColumnsUpdate}
+                    />
+                  </Col>
+                </Row>
               </div>
             )}
             {activeTab === 2 && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx
index fd11d735c9c..f34ebc98f85 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx
@@ -12,6 +12,7 @@
  */
 
 import { Col, Row } from 'antd';
+import classNames from 'classnames';
 import React, { FC, HTMLAttributes, ReactNode } from 'react';
 import './../../styles/layout/page-layout.less';
 
@@ -19,6 +20,7 @@ interface PageLayoutProp extends HTMLAttributes<HTMLDivElement> {
   leftPanel?: ReactNode;
   header?: ReactNode;
   rightPanel?: ReactNode;
+  center?: boolean;
 }
 
 export const pageContainerStyles = {
@@ -33,6 +35,7 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
   children,
   rightPanel,
   className,
+  center = false,
 }: PageLayoutProp) => {
   return (
     <Row className={className} gutter={[16, 16]} style={pageContainerStyles}>
@@ -45,14 +48,21 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
         </Col>
       )}
       <Col
-        className="page-layout-v1-center page-layout-v1-vertical-scroll"
+        className={classNames(
+          'page-layout-v1-center page-layout-v1-vertical-scroll',
+          {
+            'flex justify-center': center,
+          }
+        )}
         flex={
           leftPanel && rightPanel
             ? 'calc(100% - 568px)'
             : leftPanel || rightPanel
             ? 'calc(100% - 284px)'
             : '100%'
-        }>
+        }
+        offset={center ? 3 : 0}
+        span={center ? 18 : 24}>
         {children}
       </Col>
       {rightPanel && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx
index 2f4876eacd5..942ec022d75 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddIngestionPage/AddIngestionPage.component.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Space } from 'antd';
 import { AxiosError } from 'axios';
 import { capitalize, startCase } from 'lodash';
 import { ServiceTypes } from 'Models';
@@ -29,7 +30,7 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
 import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayoutV1 from '../../components/containers/PageLayoutV1';
 import Loader from '../../components/Loader/Loader';
 import {
   DEPLOYED_PROGRESS_VAL,
@@ -40,7 +41,6 @@ import {
 import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants';
 import { FormSubmitType } from '../../enums/form.enum';
 import { IngestionActionMessage } from '../../enums/ingestion.enum';
-import { PageLayoutType } from '../../enums/layout.enum';
 import { ServiceCategory } from '../../enums/service.enum';
 import { CreateIngestionPipeline } from '../../generated/api/services/ingestionPipelines/createIngestionPipeline';
 import { PipelineType } from '../../generated/entity/services/ingestionPipelines/ingestionPipeline';
@@ -258,43 +258,47 @@ const AddIngestionPage = () => {
     } else {
       return (
         <div className="self-center">
-          <PageLayout
-            classes="w-max-1080 h-full p-t-md"
-            header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
-            layout={PageLayoutType['2ColRTL']}
-            rightPanel={getServiceIngestionStepGuide(
-              activeIngestionStep,
-              true,
-              `${serviceData?.name || ''}_${ingestionType}`,
-              '',
-              ingestionType as PipelineType,
-              isDeployed(),
-              false,
-              isAirflowRunning
-            )}>
-            <div className="form-container">
-              <AddIngestion
-                activeIngestionStep={activeIngestionStep}
-                handleCancelClick={goToService}
-                handleViewServiceClick={goToService}
-                heading={`Add ${capitalize(ingestionType)} Ingestion`}
-                ingestionAction={ingestionAction}
-                ingestionProgress={ingestionProgress}
-                isAirflowSetup={isAirflowRunning}
-                isIngestionCreated={isIngestionCreated}
-                isIngestionDeployed={isIngestionDeployed}
-                pipelineType={ingestionType as PipelineType}
-                serviceCategory={serviceCategory as ServiceCategory}
-                serviceData={serviceData as DataObj}
-                setActiveIngestionStep={(step) => setActiveIngestionStep(step)}
-                showDeployButton={showIngestionButton}
-                status={FormSubmitType.ADD}
-                onAddIngestionSave={onAddIngestionSave}
-                onAirflowStatusCheck={onAirflowStatusCheck}
-                onIngestionDeploy={onIngestionDeploy}
-              />
+          <PageLayoutV1 center>
+            <Space direction="vertical" size="middle">
+              <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
+              <div className="form-container">
+                <AddIngestion
+                  activeIngestionStep={activeIngestionStep}
+                  handleCancelClick={goToService}
+                  handleViewServiceClick={goToService}
+                  heading={`Add ${capitalize(ingestionType)} Ingestion`}
+                  ingestionAction={ingestionAction}
+                  ingestionProgress={ingestionProgress}
+                  isAirflowSetup={isAirflowRunning}
+                  isIngestionCreated={isIngestionCreated}
+                  isIngestionDeployed={isIngestionDeployed}
+                  pipelineType={ingestionType as PipelineType}
+                  serviceCategory={serviceCategory as ServiceCategory}
+                  serviceData={serviceData as DataObj}
+                  setActiveIngestionStep={(step) =>
+                    setActiveIngestionStep(step)
+                  }
+                  showDeployButton={showIngestionButton}
+                  status={FormSubmitType.ADD}
+                  onAddIngestionSave={onAddIngestionSave}
+                  onAirflowStatusCheck={onAirflowStatusCheck}
+                  onIngestionDeploy={onIngestionDeploy}
+                />
+              </div>
+            </Space>
+            <div className="m-t-xlg p-x-lg w-800" data-testid="right-panel">
+              {getServiceIngestionStepGuide(
+                activeIngestionStep,
+                true,
+                `${serviceData?.name || ''}_${ingestionType}`,
+                '',
+                ingestionType as PipelineType,
+                isDeployed(),
+                false,
+                isAirflowRunning
+              )}
             </div>
-          </PageLayout>
+          </PageLayoutV1>
         </div>
       );
     }
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/EditConnectionFormPage/EditConnectionFormPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/EditConnectionFormPage/EditConnectionFormPage.component.tsx
index c7f3d26afcf..89b76c7e545 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/EditConnectionFormPage/EditConnectionFormPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/EditConnectionFormPage/EditConnectionFormPage.component.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Typography } from 'antd';
+import { Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { startCase } from 'lodash';
 import { ServiceOption, ServicesData, ServiceTypes } from 'Models';
@@ -22,13 +22,12 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
 import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayoutV1 from '../../components/containers/PageLayoutV1';
 import Loader from '../../components/Loader/Loader';
 import ServiceConfig from '../../components/ServiceConfig/ServiceConfig';
 import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants';
 import { addServiceGuide } from '../../constants/service-guide.constant';
 import { OPENMETADATA } from '../../constants/Services.constant';
-import { PageLayoutType } from '../../enums/layout.enum';
 import { ServiceCategory } from '../../enums/service.enum';
 import { ConfigData, ServicesType } from '../../interface/service.interface';
 import jsonData from '../../jsons/en';
@@ -150,28 +149,28 @@ function EditConnectionFormPage() {
         {getEntityMissingError(serviceCategory, serviceFQN)}
       </ErrorPlaceHolder>
     ) : (
-      <PageLayout
-        classes="w-max-1080 h-full p-t-xss"
-        header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
-        layout={PageLayoutType['2ColRTL']}
-        rightPanel={fetchRightPanel()}>
-        <div className="form-container">
-          <Typography.Title level={5}>
-            {`Edit ${serviceFQN} Service Connection`}
-          </Typography.Title>
-          <ServiceConfig
-            data={serviceDetails as ServicesData}
-            disableTestConnection={
-              ServiceCategory.METADATA_SERVICES === serviceCategory &&
-              OPENMETADATA === serviceFQN
-            }
-            handleUpdate={handleConfigUpdate}
-            serviceCategory={serviceCategory as ServiceCategory}
-            serviceFQN={serviceFQN}
-            serviceType={serviceDetails?.serviceType || ''}
-          />
-        </div>
-      </PageLayout>
+      <PageLayoutV1 center>
+        <Space direction="vertical" size="middle">
+          <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
+          <div className="form-container">
+            <Typography.Title level={5}>
+              {`Edit ${serviceFQN} Service Connection`}
+            </Typography.Title>
+            <ServiceConfig
+              data={serviceDetails as ServicesData}
+              disableTestConnection={
+                ServiceCategory.METADATA_SERVICES === serviceCategory &&
+                OPENMETADATA === serviceFQN
+              }
+              handleUpdate={handleConfigUpdate}
+              serviceCategory={serviceCategory as ServiceCategory}
+              serviceFQN={serviceFQN}
+              serviceType={serviceDetails?.serviceType || ''}
+            />
+          </div>
+        </Space>
+        <div className="m-t-xlg p-x-lg w-800">{fetchRightPanel()}</div>
+      </PageLayoutV1>
     );
   };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
index 55386741e32..f6caa44fc40 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/EditIngestionPage/EditIngestionPage.component.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { Space } from 'antd';
 import { AxiosError } from 'axios';
 import { capitalize, startCase } from 'lodash';
 import { ServiceTypes } from 'Models';
@@ -28,7 +29,7 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
 import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayoutV1 from '../../components/containers/PageLayoutV1';
 import Loader from '../../components/Loader/Loader';
 import {
   DEPLOYED_PROGRESS_VAL,
@@ -39,7 +40,6 @@ import {
 import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants';
 import { FormSubmitType } from '../../enums/form.enum';
 import { IngestionActionMessage } from '../../enums/ingestion.enum';
-import { PageLayoutType } from '../../enums/layout.enum';
 import { ServiceCategory } from '../../enums/service.enum';
 import { CreateIngestionPipeline } from '../../generated/api/services/ingestionPipelines/createIngestionPipeline';
 import {
@@ -288,45 +288,49 @@ const EditIngestionPage = () => {
     } else {
       return (
         <div className="self-center">
-          <PageLayout
-            classes="w-max-1080 h-full p-t-xss"
-            header={<TitleBreadcrumb titleLinks={slashedBreadcrumb} />}
-            layout={PageLayoutType['2ColRTL']}
-            rightPanel={getServiceIngestionStepGuide(
-              activeIngestionStep,
-              true,
-              ingestionData?.name || '',
-              '',
-              ingestionType as PipelineType,
-              isDeployed(),
-              true,
-              isAirflowRunning
-            )}>
-            <div className="form-container">
-              <AddIngestion
-                activeIngestionStep={activeIngestionStep}
-                data={ingestionData}
-                handleCancelClick={goToService}
-                handleViewServiceClick={goToService}
-                heading={`Edit ${capitalize(ingestionType)} Ingestion`}
-                ingestionAction={ingestionAction}
-                ingestionProgress={ingestionProgress}
-                isAirflowSetup={isAirflowRunning}
-                isIngestionCreated={isIngestionCreated}
-                isIngestionDeployed={isIngestionDeployed}
-                pipelineType={ingestionType as PipelineType}
-                serviceCategory={serviceCategory as ServiceCategory}
-                serviceData={serviceData as DataObj}
-                setActiveIngestionStep={(step) => setActiveIngestionStep(step)}
-                showDeployButton={showIngestionButton}
-                status={FormSubmitType.EDIT}
-                onAirflowStatusCheck={onAirflowStatusCheck}
-                onIngestionDeploy={onIngestionDeploy}
-                onSuccessSave={goToService}
-                onUpdateIngestion={onEditIngestionSave}
-              />
+          <PageLayoutV1 center>
+            <Space direction="vertical" size="middle">
+              <TitleBreadcrumb titleLinks={slashedBreadcrumb} />
+              <div className="form-container">
+                <AddIngestion
+                  activeIngestionStep={activeIngestionStep}
+                  data={ingestionData}
+                  handleCancelClick={goToService}
+                  handleViewServiceClick={goToService}
+                  heading={`Edit ${capitalize(ingestionType)} Ingestion`}
+                  ingestionAction={ingestionAction}
+                  ingestionProgress={ingestionProgress}
+                  isAirflowSetup={isAirflowRunning}
+                  isIngestionCreated={isIngestionCreated}
+                  isIngestionDeployed={isIngestionDeployed}
+                  pipelineType={ingestionType as PipelineType}
+                  serviceCategory={serviceCategory as ServiceCategory}
+                  serviceData={serviceData as DataObj}
+                  setActiveIngestionStep={(step) =>
+                    setActiveIngestionStep(step)
+                  }
+                  showDeployButton={showIngestionButton}
+                  status={FormSubmitType.EDIT}
+                  onAirflowStatusCheck={onAirflowStatusCheck}
+                  onIngestionDeploy={onIngestionDeploy}
+                  onSuccessSave={goToService}
+                  onUpdateIngestion={onEditIngestionSave}
+                />
+              </div>
+            </Space>
+            <div className="m-t-xlg p-x-lg w-800" data-testid="right-panel">
+              {getServiceIngestionStepGuide(
+                activeIngestionStep,
+                true,
+                ingestionData?.name || '',
+                '',
+                ingestionType as PipelineType,
+                isDeployed(),
+                true,
+                isAirflowRunning
+              )}
             </div>
-          </PageLayout>
+          </PageLayoutV1>
         </div>
       );
     }
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
index e5b8f3eb64b..cb6e403c480 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
@@ -47,6 +47,9 @@
 .w-48 {
   width: 12rem;
 }
+.w-800 {
+  width: 800px;
+}
 .w-11-12 {
   width: 91.666667%;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
index ea366ce3df6..b4c9387fd86 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
@@ -140,6 +140,10 @@
 .m-t-lg {
   margin-top: @margin-lg;
 }
+.m-t-xlg {
+  margin-top: @margin-xlg;
+}
+
 .mt-44 {
   margin-top: 11rem /* 176px */;
 }