MINOR : fix side spacing in setting and other pages (#14957)

* fix side spacing in setting and other pages

* minor fix

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,10 +400,9 @@ 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 className="page-container">
-        <Row>
         <Col className="d-flex" flex="auto">
           <Button
             className="p-0"
@@ -445,7 +444,7 @@ const AppDetails = () => {
         </Col>
       </Row>
       <Row>
-          <Col span={24}>
+        <Col className="page-container" span={24}>
           <Space className="app-details-header w-full m-t-md" size={24}>
             <AppLogo appName={appData?.fullyQualifiedName ?? ''} />
 
@@ -488,10 +487,10 @@ const AppDetails = () => {
             </div>
           </Space>
         </Col>
-          <Col span={24}>
+        <Col className="p-0" span={24}>
           <Tabs
             destroyInactiveTabPane
-              className="app-details-page-tabs"
+            className="app-details-page-tabs entity-details-page-tabs"
             data-testid="tabs"
             items={tabs}
           />
@@ -510,7 +509,6 @@ const AppDetails = () => {
         onCancel={() => setShowDeleteModel(false)}
         onConfirm={onConfirmAction}
       />
-      </div>
     </PageLayoutV1>
   );
 };

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 {

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>

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

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}>

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
     }

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}>

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>

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>

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>

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>

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>

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>

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>

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} />

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

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>

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>

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>

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>

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

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>

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,