From aaedbdc4458c2e992579a19fac7aa16e691bc00a Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Fri, 10 Dec 2021 10:19:47 +0530
Subject: [PATCH] Change UI for explore page (#1647)

---
 .../ui/src/components/Explore/Explore.component.tsx       | 8 +++++---
 .../resources/ui/src/components/containers/PageLayout.tsx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
index 5348c3f4095..0a9a73d884f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
@@ -390,11 +390,11 @@ const Explore: React.FC<ExploreProps> = ({
   const getTabs = () => {
     return (
       <div className="tw-mb-5">
-        <nav className="tw-flex tw-flex-row tw-gh-tabs-container tw-px-5 tw-pl-16 tw-mx-6 tw-justify-between">
+        <nav className="tw-flex tw-flex-row tw-gh-tabs-container tw-mx-6 tw-justify-around">
           <div>
             {tabsInfo.map((tabDetail, index) => (
               <button
-                className={`tw-pb-2 tw-px-4 tw-gh-tabs ${getActiveTabClass(
+                className={`tw-pb-2 tw-pr-6 tw-gh-tabs ${getActiveTabClass(
                   tabDetail.tab
                 )}`}
                 data-testid="tab"
@@ -408,7 +408,9 @@ const Explore: React.FC<ExploreProps> = ({
                   icon={tabDetail.icon}
                 />
                 {tabDetail.label}
-                {getTabCount(tabDetail.index, tabDetail.tab === currentTab)}
+                <span className="tw-pl-2">
+                  {getTabCount(tabDetail.index, tabDetail.tab === currentTab)}
+                </span>
               </button>
             ))}
           </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
index a46c40ba385..9c473d4e489 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
@@ -28,7 +28,7 @@ const PageLayout: FC<PageLayoutProp> = ({
   return (
     <div
       className={classNames(
-        'page-layout-container tw-gap-x-3 tw-px-4 tw-overflow-y-auto',
+        'page-layout-container tw-gap-x-3 tw-px-12 tw-overflow-y-auto',
         {
           'page-layout-container-left-center-right':
             leftPanel && children && rightPanel,