From 7849313f84dff5e5c090db98b8c4e13dadb3e566 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Tue, 30 Jan 2024 21:05:09 +0530
Subject: [PATCH] MINOR : fix side spacing in setting and other pages (#14957)

* fix side spacing in setting and other pages

* minor fix
---
 .../AppDetails/AppDetails.component.tsx       | 212 +++++++++---------
 .../Applications/AppDetails/app-details.less  |   3 -
 .../BotListV1/BotListV1.component.tsx         |   2 +-
 .../Team/TeamDetails/TeamDetailsV1.tsx        |  14 +-
 .../TeamDetails/UserTab/UserTab.component.tsx |   2 +-
 .../components/Team/TeamDetails/teams.less    |   8 +-
 .../src/pages/Application/ApplicationPage.tsx |   6 +-
 .../LoginConfigurationPage.tsx                |   2 +-
 .../CustomLogoConfigSettingsPage.tsx          |   2 +-
 .../CustomPageSettings/CustomPageSettings.tsx |   2 +-
 .../CustomPropertiesPageV1.tsx                |   4 +-
 .../EmailConfigSettingsPage.component.tsx     |   2 +-
 .../NotificationListPage.tsx                  |   2 +-
 .../ObservabilityAlertDetailsPage.tsx         |   2 +-
 .../ObservabilityAlertsPage.tsx               |   2 +-
 .../PersonaDetailsPage/PersonaDetailsPage.tsx |   2 +-
 .../Persona/PersonaListPage/PersonaPage.tsx   |   2 +-
 .../PoliciesListPage/PoliciesListPage.tsx     |   2 +-
 .../RolesPage/RolesListPage/RolesListPage.tsx |   2 +-
 .../src/pages/ServicesPage/ServicesPage.tsx   |   2 +-
 .../TestSuiteDetailsPage.component.tsx        |   2 +-
 .../src/pages/UserListPage/UserListPageV1.tsx |   2 +-
 .../src/main/resources/ui/src/styles/app.less |   2 +-
 23 files changed, 140 insertions(+), 141 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppDetails/AppDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppDetails/AppDetails.component.tsx
index e8217f1d44b..b601ffea562 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppDetails/AppDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppDetails/AppDetails.component.tsx
@@ -317,7 +317,7 @@ const AppDetails = () => {
               ),
               key: ApplicationTabs.CONFIGURATION,
               children: (
-                <div>
+                <div className="p-lg">
                   <FormBuilder
                     useSelectWidget
                     cancelText={t('label.back')}
@@ -342,7 +342,7 @@ const AppDetails = () => {
         ),
         key: ApplicationTabs.SCHEDULE,
         children: (
-          <div className="p-y-md">
+          <div className="p-lg">
             {appData && (
               <AppSchedule
                 appData={appData}
@@ -367,7 +367,7 @@ const AppDetails = () => {
               ),
               key: ApplicationTabs.HISTORY,
               children: (
-                <div className="p-y-md">
+                <div className="p-lg">
                   <AppRunsHistory appData={appData} />
                 </div>
               ),
@@ -400,117 +400,115 @@ const AppDetails = () => {
 
   return (
     <PageLayoutV1
-      className="app-details-page-layout p-0"
+      className="app-details-page-layout"
       pageTitle={t('label.application-plural')}>
-      <div className="page-container">
-        <Row>
-          <Col className="d-flex" flex="auto">
-            <Button
-              className="p-0"
-              icon={<LeftOutlined />}
-              size="small"
-              type="text"
-              onClick={onBrowseAppsClick}>
-              <Typography.Text className="font-medium">
-                {t('label.browse-app-plural')}
-              </Typography.Text>
-            </Button>
-          </Col>
-          <Col flex="360px">
-            <div className="d-flex gap-2 justify-end">
-              <Dropdown
-                align={{ targetOffset: [-12, 0] }}
-                className="m-l-xs"
-                menu={{
-                  items: manageButtonContent,
-                }}
-                open={showActions}
-                overlayClassName="glossary-manage-dropdown-list-container"
-                overlayStyle={{ width: '350px' }}
-                placement="bottomRight"
-                trigger={['click']}
-                onOpenChange={setShowActions}>
-                <Tooltip placement="right">
-                  <Button
-                    className="glossary-manage-dropdown-button p-x-xs"
-                    data-testid="manage-button"
-                    icon={
-                      <IconDropdown className="vertical-align-inherit manage-dropdown-icon" />
-                    }
-                    onClick={() => setShowActions(true)}
-                  />
-                </Tooltip>
-              </Dropdown>
-            </div>
-          </Col>
-        </Row>
-        <Row>
-          <Col span={24}>
-            <Space className="app-details-header w-full m-t-md" size={24}>
-              <AppLogo appName={appData?.fullyQualifiedName ?? ''} />
+      <Row className="page-container">
+        <Col className="d-flex" flex="auto">
+          <Button
+            className="p-0"
+            icon={<LeftOutlined />}
+            size="small"
+            type="text"
+            onClick={onBrowseAppsClick}>
+            <Typography.Text className="font-medium">
+              {t('label.browse-app-plural')}
+            </Typography.Text>
+          </Button>
+        </Col>
+        <Col flex="360px">
+          <div className="d-flex gap-2 justify-end">
+            <Dropdown
+              align={{ targetOffset: [-12, 0] }}
+              className="m-l-xs"
+              menu={{
+                items: manageButtonContent,
+              }}
+              open={showActions}
+              overlayClassName="glossary-manage-dropdown-list-container"
+              overlayStyle={{ width: '350px' }}
+              placement="bottomRight"
+              trigger={['click']}
+              onOpenChange={setShowActions}>
+              <Tooltip placement="right">
+                <Button
+                  className="glossary-manage-dropdown-button p-x-xs"
+                  data-testid="manage-button"
+                  icon={
+                    <IconDropdown className="vertical-align-inherit manage-dropdown-icon" />
+                  }
+                  onClick={() => setShowActions(true)}
+                />
+              </Tooltip>
+            </Dropdown>
+          </div>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="page-container" span={24}>
+          <Space className="app-details-header w-full m-t-md" size={24}>
+            <AppLogo appName={appData?.fullyQualifiedName ?? ''} />
 
-              <div className="w-full">
-                <Typography.Title level={4}>
-                  {getEntityName(appData)}
-                </Typography.Title>
+            <div className="w-full">
+              <Typography.Title level={4}>
+                {getEntityName(appData)}
+              </Typography.Title>
 
-                <div className="d-flex items-center flex-wrap gap-6">
-                  <Space size={8}>
-                    <ClockCircleOutlined />
-                    <Typography.Text className="text-xs text-grey-muted">
-                      {`${t('label.installed')} ${getRelativeTime(
-                        appData?.updatedAt
-                      )}`}
-                    </Typography.Text>
-                  </Space>
+              <div className="d-flex items-center flex-wrap gap-6">
+                <Space size={8}>
+                  <ClockCircleOutlined />
+                  <Typography.Text className="text-xs text-grey-muted">
+                    {`${t('label.installed')} ${getRelativeTime(
+                      appData?.updatedAt
+                    )}`}
+                  </Typography.Text>
+                </Space>
 
-                  <Space size={8}>
-                    <UserOutlined />
-                    <Typography.Text className="text-xs text-grey-muted">
-                      {t('label.developed-by-developer', {
-                        developer: appData?.developer,
-                      })}
-                    </Typography.Text>
-                  </Space>
+                <Space size={8}>
+                  <UserOutlined />
+                  <Typography.Text className="text-xs text-grey-muted">
+                    {t('label.developed-by-developer', {
+                      developer: appData?.developer,
+                    })}
+                  </Typography.Text>
+                </Space>
 
-                  {appData?.developerUrl && (
-                    <div className="flex-center gap-2">
-                      <IconExternalLink width={12} />
-                      <Typography.Link
-                        className="text-xs"
-                        href={appData?.developerUrl}
-                        target="_blank">
-                        <Space>{t('label.visit-developer-website')}</Space>
-                      </Typography.Link>
-                    </div>
-                  )}
-                </div>
+                {appData?.developerUrl && (
+                  <div className="flex-center gap-2">
+                    <IconExternalLink width={12} />
+                    <Typography.Link
+                      className="text-xs"
+                      href={appData?.developerUrl}
+                      target="_blank">
+                      <Space>{t('label.visit-developer-website')}</Space>
+                    </Typography.Link>
+                  </div>
+                )}
               </div>
-            </Space>
-          </Col>
-          <Col span={24}>
-            <Tabs
-              destroyInactiveTabPane
-              className="app-details-page-tabs"
-              data-testid="tabs"
-              items={tabs}
-            />
-          </Col>
-        </Row>
+            </div>
+          </Space>
+        </Col>
+        <Col className="p-0" span={24}>
+          <Tabs
+            destroyInactiveTabPane
+            className="app-details-page-tabs entity-details-page-tabs"
+            data-testid="tabs"
+            items={tabs}
+          />
+        </Col>
+      </Row>
 
-        <ConfirmationModal
-          bodyText={t('message.are-you-sure-action-property', {
-            action: actionText,
-            propertyName: getEntityName(appData),
-          })}
-          cancelText={t('label.cancel')}
-          confirmText={t('label.ok')}
-          header={t('message.are-you-sure')}
-          visible={showDeleteModel}
-          onCancel={() => setShowDeleteModel(false)}
-          onConfirm={onConfirmAction}
-        />
-      </div>
+      <ConfirmationModal
+        bodyText={t('message.are-you-sure-action-property', {
+          action: actionText,
+          propertyName: getEntityName(appData),
+        })}
+        cancelText={t('label.cancel')}
+        confirmText={t('label.ok')}
+        header={t('message.are-you-sure')}
+        visible={showDeleteModel}
+        onCancel={() => setShowDeleteModel(false)}
+        onConfirm={onConfirmAction}
+      />
     </PageLayoutV1>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppDetails/app-details.less b/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppDetails/app-details.less
index ec14a75b288..45b2fa4ea85 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppDetails/app-details.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppDetails/app-details.less
@@ -35,9 +35,6 @@
 }
 
 .app-details-page-layout {
-  .page-layout-v1-center {
-    padding: 0;
-  }
   // ****  Lazy Logs ****
 
   .lazy-log-container {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx
index 8c8a3eab44a..a4fbec11751 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BotListV1/BotListV1.component.tsx
@@ -243,7 +243,7 @@ const BotListV1 = ({
       </Col>
     </Row>
   ) : (
-    <Row className="page-container" gutter={[16, 16]}>
+    <Row className="page-container" gutter={[0, 16]}>
       <Col span={24}>
         <TitleBreadcrumb titleLinks={breadcrumbs} />
       </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamDetailsV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamDetailsV1.tsx
index 6099c4b4f70..f470386680b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamDetailsV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamDetailsV1.tsx
@@ -654,7 +654,7 @@ const TeamDetailsV1 = ({
     ) : (
       <Row
         className="team-list-container"
-        gutter={[8, 16]}
+        gutter={[0, 16]}
         justify="space-between">
         <Col span={8}>
           <Searchbar
@@ -789,7 +789,7 @@ const TeamDetailsV1 = ({
           ),
         })
       ) : (
-        <Row className="roles-and-policy p-md" gutter={[0, 10]}>
+        <Row className="roles-and-policy p-y-md" gutter={[0, 10]}>
           {entityPermissions.EditAll && !isTeamDeleted && (
             <Col className="d-flex justify-end" span={24}>
               <Button
@@ -860,7 +860,7 @@ const TeamDetailsV1 = ({
           ),
         })
       ) : (
-        <Row className="roles-and-policy p-md" gutter={[0, 10]}>
+        <Row className="roles-and-policy p-y-md" gutter={[0, 10]}>
           {entityPermissions.EditAll && !isTeamDeleted && (
             <Col className="d-flex justify-end" span={24}>
               <Button
@@ -1035,7 +1035,7 @@ const TeamDetailsV1 = ({
 
   const tabsChildrenRender = useCallback(
     (key: TeamsPageTab) => (
-      <Row className="teams-tabs-content-container">
+      <Row className="teams-tabs-content-container p-x-lg">
         <Col className="teams-scroll-component" span={previewAsset ? 18 : 24}>
           {isFetchingAdvancedDetails ? <Loader /> : getTabChildren(key)}
         </Col>
@@ -1104,16 +1104,16 @@ const TeamDetailsV1 = ({
   }
 
   return (
-    <div className="teams-layout page-container">
+    <div className="teams-layout">
       <Row className="h-full" data-testid="team-details-container">
         {isOrganization && (
-          <Col className="p-x-md p-y-sm" span={24}>
+          <Col className="p-x-lg p-y-sm" span={24}>
             <TitleBreadcrumb titleLinks={breadcrumbs} />
           </Col>
         )}
 
         <Col
-          className="teams-profile-container"
+          className="teams-profile-container p-x-lg"
           data-testid="team-detail-header"
           span={24}>
           <Collapse
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/UserTab/UserTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/UserTab/UserTab.component.tsx
index c408ce36a1c..ccfc725a542 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/UserTab/UserTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/UserTab/UserTab.component.tsx
@@ -339,7 +339,7 @@ export const UserTab = ({
   }
 
   return (
-    <Row className="p-md" gutter={[16, 16]}>
+    <Row className="p-y-md" gutter={[0, 16]}>
       <Col span={24}>
         <Row justify="space-between">
           <Col span={8}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/teams.less b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/teams.less
index 8eb7d48a865..408809318ce 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/teams.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/teams.less
@@ -14,7 +14,7 @@
 @import url('../../../styles/variables.less');
 
 .team-list-container {
-  padding: 20px;
+  padding: 20px 0;
   .ant-btn {
     border-radius: 4px;
   }
@@ -78,7 +78,7 @@
 }
 
 .teams-layout {
-  margin: -16px -16px 0 -16px;
+  margin: -12px 0;
 
   .ant-card-head-title {
     padding-top: 0;
@@ -96,6 +96,10 @@
       background: none;
     }
 
+    .ant-collapse-header {
+      padding-left: 0;
+    }
+
     .ant-collapse-arrow {
       top: 35px !important; // overriding from antd
     }
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Application/ApplicationPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Application/ApplicationPage.tsx
index 2ec037f3e9c..c5775afe426 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/Application/ApplicationPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/Application/ApplicationPage.tsx
@@ -133,7 +133,7 @@ const ApplicationPage = () => {
 
   return (
     <PageLayoutV1 pageTitle={t('label.application-plural')}>
-      <Row className="page-container" gutter={[16, 16]}>
+      <Row className="page-container" gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
@@ -141,7 +141,7 @@ const ApplicationPage = () => {
           <PageHeader data={PAGE_HEADERS.APPLICATION} />
         </Col>
         <Col className="d-flex justify-end" span={8}>
-          <Space>
+          <Space size="middle">
             <div>
               <Switch
                 checked={showDisabled}
@@ -161,7 +161,7 @@ const ApplicationPage = () => {
           </Space>
         </Col>
       </Row>
-      <Row className="m-t-lg">
+      <Row className="page-container m-t-lg">
         {isLoading &&
           [1, 2].map((key) => (
             <Col key={key} span={12}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Configuration/LoginConfigurationDetails/LoginConfigurationPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Configuration/LoginConfigurationDetails/LoginConfigurationPage.tsx
index d3bfb5bf28f..a7bcb6bcf48 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/Configuration/LoginConfigurationDetails/LoginConfigurationPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/Configuration/LoginConfigurationDetails/LoginConfigurationPage.tsx
@@ -89,7 +89,7 @@ const LoginConfigurationPage = () => {
 
   return (
     <PageLayoutV1 pageTitle={t('label.login')}>
-      <Row className="page-container" gutter={[16, 16]}>
+      <Row className="page-container" gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/CustomLogoConfigSettingsPage/CustomLogoConfigSettingsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/CustomLogoConfigSettingsPage/CustomLogoConfigSettingsPage.tsx
index 02d1700835f..e27a3c358c4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/CustomLogoConfigSettingsPage/CustomLogoConfigSettingsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/CustomLogoConfigSettingsPage/CustomLogoConfigSettingsPage.tsx
@@ -96,7 +96,7 @@ const CustomLogoConfigSettingsPage = () => {
 
   return (
     <PageLayoutV1 pageTitle={t('label.custom-logo')}>
-      <Row align="middle" className="page-container" gutter={[16, 16]}>
+      <Row align="middle" className="page-container" gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPageSettings/CustomPageSettings.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPageSettings/CustomPageSettings.tsx
index e2c8d1b5375..757876a008d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPageSettings/CustomPageSettings.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPageSettings/CustomPageSettings.tsx
@@ -155,7 +155,7 @@ export const CustomPageSettings = () => {
       <Row
         className="customize-landing-page user-listing p-b-md page-container"
         data-testid="custom-page-setting-component"
-        gutter={[16, 16]}>
+        gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx
index ffbbc26bd0b..413810c70e5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPageV1/CustomPropertiesPageV1.tsx
@@ -269,9 +269,9 @@ const CustomEntityDetailV1 = () => {
   return (
     <PageLayoutV1 pageTitle={t('label.custom-property')}>
       <Row
-        className="m-y-xs page-container"
+        className="page-container"
         data-testid="custom-entity-container"
-        gutter={[16, 16]}>
+        gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/EmailConfigSettingsPage/EmailConfigSettingsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/EmailConfigSettingsPage/EmailConfigSettingsPage.component.tsx
index 469dbfca0ea..de1827fe45e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/EmailConfigSettingsPage/EmailConfigSettingsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/EmailConfigSettingsPage/EmailConfigSettingsPage.component.tsx
@@ -157,7 +157,7 @@ function EmailConfigSettingsPage() {
 
   return (
     <PageLayoutV1 pageTitle={t('label.email')}>
-      <Row align="middle" className="page-container" gutter={[16, 16]}>
+      <Row align="middle" className="page-container" gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/NotificationListPage/NotificationListPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/NotificationListPage/NotificationListPage.tsx
index 006dcb3665a..6b74717517f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/NotificationListPage/NotificationListPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/NotificationListPage/NotificationListPage.tsx
@@ -211,7 +211,7 @@ const NotificationListPage = () => {
 
   return (
     <PageLayoutV1 pageTitle={t('label.alert-plural')}>
-      <Row className="page-container" gutter={[16, 16]}>
+      <Row className="page-container" gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ObservabilityAlertDetailsPage/ObservabilityAlertDetailsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ObservabilityAlertDetailsPage/ObservabilityAlertDetailsPage.tsx
index 6c36225da54..ff9d903a4a7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ObservabilityAlertDetailsPage/ObservabilityAlertDetailsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ObservabilityAlertDetailsPage/ObservabilityAlertDetailsPage.tsx
@@ -312,7 +312,7 @@ function ObservabilityAlertDetailsPage({
             data-testid="alert-details-container">
             <Row
               className="add-notification-container p-x-lg p-t-md"
-              gutter={[16, 16]}>
+              gutter={[0, 16]}>
               <Col span={24}>
                 <TitleBreadcrumb titleLinks={breadcrumb} />
               </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ObservabilityAlertsPage/ObservabilityAlertsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ObservabilityAlertsPage/ObservabilityAlertsPage.tsx
index 213cb73b83f..18292aa0f3b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ObservabilityAlertsPage/ObservabilityAlertsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ObservabilityAlertsPage/ObservabilityAlertsPage.tsx
@@ -196,7 +196,7 @@ const ObservabilityAlertsPage = () => {
 
   return (
     <PageLayoutV1 pageTitle={t('label.alert-plural')}>
-      <Row className="p-x-lg p-t-md" gutter={[16, 16]}>
+      <Row className="p-x-lg p-t-md" gutter={[0, 16]}>
         <Col span={24}>
           <div className="d-flex justify-between">
             <PageHeader data={pageHeaderData} />
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaDetailsPage/PersonaDetailsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaDetailsPage/PersonaDetailsPage.tsx
index 5a34ceff5ee..d8a03b96699 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaDetailsPage/PersonaDetailsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaDetailsPage/PersonaDetailsPage.tsx
@@ -173,7 +173,7 @@ export const PersonaDetailsPage = () => {
 
   return (
     <PageLayoutV1 pageTitle={personaDetails.name}>
-      <Row className="m-b-md page-container" gutter={[16, 16]}>
+      <Row className="m-b-md page-container" gutter={[0, 16]}>
         <Col span={24}>
           <div className="d-flex justify-between items-start">
             <PageHeader
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx
index d6a05cf53f0..f7090aab190 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx
@@ -132,7 +132,7 @@ export const PersonaPage = () => {
       <Row
         className="user-listing page-container p-b-md"
         data-testid="user-list-v1-component"
-        gutter={[16, 16]}>
+        gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesListPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesListPage.tsx
index 27b23006735..97de625bc0e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesListPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesListPage/PoliciesListPage.tsx
@@ -265,7 +265,7 @@ const PoliciesListPage = () => {
       <Row
         className="policies-list-container page-container"
         data-testid="policies-list-container"
-        gutter={[16, 16]}>
+        gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesListPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesListPage.tsx
index aab7dc324f1..f28e5f18601 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesListPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesListPage/RolesListPage.tsx
@@ -263,7 +263,7 @@ const RolesListPage = () => {
       <Row
         className="roles-list-container page-container"
         data-testid="roles-list-container"
-        gutter={[16, 16]}>
+        gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ServicesPage/ServicesPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ServicesPage/ServicesPage.tsx
index d89fadad73e..efc175b4d0d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ServicesPage/ServicesPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ServicesPage/ServicesPage.tsx
@@ -71,7 +71,7 @@ const ServicesPage = () => {
 
   return viewAllPermission ? (
     <PageLayoutV1 pageTitle={serviceName}>
-      <Row className="page-container" gutter={[16, 16]}>
+      <Row className="page-container" gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TestSuiteDetailsPage/TestSuiteDetailsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TestSuiteDetailsPage/TestSuiteDetailsPage.component.tsx
index e8c854be0f3..669edadc391 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TestSuiteDetailsPage/TestSuiteDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TestSuiteDetailsPage/TestSuiteDetailsPage.component.tsx
@@ -332,7 +332,7 @@ const TestSuiteDetailsPage = () => {
       pageTitle={t('label.entity-detail-plural', {
         entity: getEntityName(testSuite),
       })}>
-      <Row className="page-container" gutter={[16, 32]}>
+      <Row className="page-container" gutter={[0, 32]}>
         <Col span={24}>
           <Space align="center" className="justify-between w-full">
             <TitleBreadcrumb
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx
index 596f15b76eb..529fd4bee32 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx
@@ -395,7 +395,7 @@ const UserListPageV1 = () => {
       <Row
         className="user-listing p-b-md page-container"
         data-testid="user-list-v1-component"
-        gutter={[16, 16]}>
+        gutter={[0, 16]}>
         <Col span={24}>
           <TitleBreadcrumb titleLinks={breadcrumbs} />
         </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index a0705062f33..49fc4d988c3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -81,7 +81,7 @@ p {
 }
 
 .page-container {
-  padding: 4px 16px 16px;
+  padding: 0 24px;
 }
 
 a,