From 02d2390afc0a8db84cfdf7862c980b671c86d437 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Wed, 22 Feb 2023 18:53:18 +0530
Subject: [PATCH] Fix : UI Improvements (#10259)

* UI Improvements

* unit test fixes
---
 .../main/resources/ui/src/assets/svg/menu.svg |   6 ++
 .../ActivityThreadPanelBody.tsx               |   9 +-
 .../components/TeamDetails/TeamDetailsV1.tsx  |  20 ++--
 .../ManageButton/ManageButton.tsx             |  39 +++----
 .../RequestDescriptionPage.tsx                | 101 ++++++++---------
 .../RequestTagPage/RequestTagPage.tsx         | 100 ++++++++---------
 .../TaskDetailPage/TaskDetailPage.tsx         |  11 +-
 .../UpdateDescriptionPage.tsx                 | 102 +++++++++---------
 .../TasksPage/UpdateTagPage/UpdateTagPage.tsx | 100 ++++++++---------
 .../TasksPage/shared/TaskPageLayout.test.tsx  |   5 -
 .../pages/TasksPage/shared/TaskPageLayout.tsx |  14 +--
 .../src/main/resources/ui/src/styles/app.less |   3 +
 .../ui/src/styles/components/size.less        |   3 +
 13 files changed, 260 insertions(+), 253 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/menu.svg

diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/menu.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/menu.svg
new file mode 100644
index 00000000000..7245904d0a6
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/menu.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.23743 1.51256C9.92085 2.19598 9.92085 3.30402 9.23743 3.98743C8.55402 4.67085 7.44598 4.67085 6.76256 3.98743C6.07915 3.30402 6.07915 2.19598 6.76256 1.51256C7.44595 0.829146 8.55399 0.829146 9.23743 1.51256Z" fill=
+"currentColor"/>
+<path d="M9.23743 6.76256C9.92085 7.44598 9.92085 8.55402 9.23743 9.23743C8.55402 9.92085 7.44598 9.92085 6.76256 9.23743C6.07915 8.55402 6.07915 7.44598 6.76256 6.76256C7.44595 6.07915 8.55399 6.07915 9.23743 6.76256" fill="currentColor"/>
+<path d="M9.23743 12.0126C9.92085 12.696 9.92085 13.804 9.23743 14.4874C8.55402 15.1709 7.44598 15.1709 6.76256 14.4874C6.07915 13.804 6.07915 12.696 6.76256 12.0126C7.44595 11.3291 8.55399 11.3291 9.23743 12.0126" fill="currentColor"/>
+</svg>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.tsx
index a5abc759445..f7bc7002a9f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanelBody.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Button, Switch } from 'antd';
+import { Button, Space, Switch } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { Operation } from 'fast-json-patch';
@@ -251,10 +251,13 @@ const ActivityThreadPanelBody: FC<ActivityThreadPanelBodyProp> = ({
           />
         )}
         {isTaskType && (
-          <div className="tw-flex tw-justify-end tw-mr-2 tw-mt-2">
+          <Space
+            align="center"
+            className="w-full justify-end p-r-xs m-t-xs"
+            size={4}>
             <Switch size="small" onChange={onSwitchChange} />
             <span className="tw-ml-1">{t('label.closed-task-plural')}</span>
-          </div>
+          </Space>
         )}
 
         {!isUndefined(selectedThread) ? (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
index a36694a2060..cbd52e0bd67 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
@@ -11,11 +11,7 @@
  *  limitations under the License.
  */
 
-import {
-  CheckOutlined,
-  CloseOutlined,
-  EllipsisOutlined,
-} from '@ant-design/icons';
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import {
   Button,
   Col,
@@ -42,6 +38,7 @@ import { Link } from 'react-router-dom';
 import { restoreTeam } from 'rest/teamsAPI';
 import AppState from '../../AppState';
 import { ReactComponent as IconEdit } from '../../assets/svg/ic-edit.svg';
+import { ReactComponent as IconDropdown } from '../../assets/svg/menu.svg';
 import {
   getTeamAndUserDetailsPath,
   getUserPath,
@@ -1089,14 +1086,13 @@ const TeamDetailsV1 = ({
                 trigger={['click']}
                 onOpenChange={setShowActions}>
                 <Button
-                  className="rounded-4 w-6 manage-dropdown-button"
+                  className="rounded-4 w-6 manage-dropdown-button d-flex justify-center"
                   data-testid="teams-dropdown"
-                  size="small">
-                  <EllipsisOutlined
-                    className="text-primary self-center manage-dropdown-icon"
-                    rotate={90}
-                  />
-                </Button>
+                  icon={
+                    <IconDropdown className="text-primary self-center manage-dropdown-icon" />
+                  }
+                  size="small"
+                />
               </Dropdown>
             )}
           </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
index 277b0a7a9de..39db53e81c9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
@@ -11,16 +11,19 @@
  *  limitations under the License.
  */
 
-import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, Col, Dropdown, Modal, Row, Tooltip, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import classNames from 'classnames';
 import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ReactComponent as IconAnnouncementsBlack } from '../../../../assets/svg/announcements-black.svg';
+import { ReactComponent as IconDelete } from '../../../../assets/svg/ic-delete.svg';
+import { ReactComponent as IconRestore } from '../../../../assets/svg/ic-restore.svg';
+import { ReactComponent as IconDropdown } from '../../../../assets/svg/menu.svg';
+
 import { NO_PERMISSION_FOR_ACTION } from '../../../../constants/HelperTextUtil';
 import { EntityType } from '../../../../enums/entity.enum';
 import { ANNOUNCEMENT_ENTITIES } from '../../../../utils/AnnouncementsUtils';
-import SVGIcons, { Icons } from '../../../../utils/SvgUtils';
 import DeleteWidgetModal from '../../DeleteWidget/DeleteWidgetModal';
 import './ManageButton.less';
 
@@ -70,8 +73,8 @@ const ManageButton: FC<Props> = ({
       label: (
         <Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
           <Row
-            className={classNames('tw-cursor-pointer manage-button', {
-              'tw-cursor-not-allowed tw-opacity-50': !canDelete,
+            className={classNames('cursor-pointer manage-button', {
+              'cursor-not-allowed opacity-50': !canDelete,
             })}
             onClick={(e) => {
               if (canDelete) {
@@ -81,7 +84,7 @@ const ManageButton: FC<Props> = ({
               }
             }}>
             <Col span={3}>
-              <SVGIcons alt="Delete" icon={Icons.DELETE} width="20px" />
+              <IconDelete className="m-t-xss" name="Delete" width={20} />
             </Col>
             <Col span={21}>
               <Row data-testid="delete-button">
@@ -112,8 +115,8 @@ const ManageButton: FC<Props> = ({
             label: (
               <Tooltip title={canDelete ? '' : NO_PERMISSION_FOR_ACTION}>
                 <Row
-                  className={classNames('tw-cursor-pointer manage-button', {
-                    'tw-cursor-not-allowed tw-opacity-50': !canDelete,
+                  className={classNames('cursor-pointer manage-button', {
+                    'cursor-not-allowed opacity-50': !canDelete,
                   })}
                   onClick={(e) => {
                     if (canDelete) {
@@ -123,8 +126,11 @@ const ManageButton: FC<Props> = ({
                     }
                   }}>
                   <Col span={3}>
-                    {' '}
-                    <SVGIcons alt="Restore" icon={Icons.RESTORE} width="20px" />
+                    <IconRestore
+                      className="m-t-xss"
+                      name="Restore"
+                      width={20}
+                    />
                   </Col>
                   <Col span={21}>
                     <Row data-testid="restore-button">
@@ -157,17 +163,17 @@ const ManageButton: FC<Props> = ({
           {
             label: (
               <Row
-                className="tw-cursor-pointer manage-button"
+                className="cursor-pointer manage-button"
                 onClick={(e) => {
                   e.stopPropagation();
                   setShowActions(false);
                   onAnnouncementClick && onAnnouncementClick();
                 }}>
                 <Col span={3}>
-                  <SVGIcons
-                    alt="announcement"
-                    icon={Icons.ANNOUNCEMENT_BLACK}
-                    width="20px"
+                  <IconAnnouncementsBlack
+                    className="m-t-xss"
+                    name="announcement"
+                    width={20}
                   />
                 </Col>
                 <Col span={21}>
@@ -213,10 +219,7 @@ const ManageButton: FC<Props> = ({
           title="Manage"
           type="default"
           onClick={() => setShowActions(true)}>
-          <EllipsisOutlined
-            className="tw-text-primary tw-self-center manage-dropdown-icon"
-            rotate={90}
-          />
+          <IconDropdown className="text-primary self-center manage-dropdown-icon" />
         </Button>
       </Dropdown>
       {isDelete && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
index 9d4f5f15004..ffbd641d304 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
@@ -202,21 +202,22 @@ const RequestDescription = () => {
 
   return (
     <TaskPageLayout>
-      <TitleBreadcrumb
-        titleLinks={[
-          ...getBreadCrumbList(entityData, entityType as EntityType),
-          {
-            name: t('label.create-entity', {
-              entity: t('label.task'),
-            }),
-            activeTitle: true,
-            url: '',
-          },
-        ]}
-      />
-      <div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
+      <Space className="w-full" direction="vertical" size="middle">
+        <TitleBreadcrumb
+          titleLinks={[
+            ...getBreadCrumbList(entityData, entityType as EntityType),
+            {
+              name: t('label.create-entity', {
+                entity: t('label.task'),
+              }),
+              activeTitle: true,
+              url: '',
+            },
+          ]}
+        />
+
         <Card
-          className="tw-col-span-2"
+          className="m-t-0"
           key="request-description"
           style={{ ...cardStyles }}
           title={t('label.create-entity', {
@@ -283,48 +284,48 @@ const RequestDescription = () => {
             </Form.Item>
           </Form>
         </Card>
+      </Space>
 
-        <div className="tw-pl-2" data-testid="entity-details">
-          <h6 className="tw-text-base">
-            {capitalize(entityType)} {t('label.detail-plural')}
-          </h6>
-          <div className="tw-flex tw-mb-4">
-            <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
-            <span>
-              {entityData.owner ? (
-                <span className="tw-flex tw-ml-1">
-                  <ProfilePicture
-                    displayName={getEntityName(entityData.owner)}
-                    id=""
-                    name={getEntityName(entityData.owner)}
-                    width="20"
-                  />
-                  <span className="tw-ml-1">
-                    {getEntityName(entityData.owner)}
-                  </span>
+      <div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
+        <h6 className="tw-text-base">
+          {capitalize(entityType)} {t('label.detail-plural')}
+        </h6>
+        <div className="tw-flex tw-mb-4">
+          <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
+          <span>
+            {entityData.owner ? (
+              <span className="tw-flex tw-ml-1">
+                <ProfilePicture
+                  displayName={getEntityName(entityData.owner)}
+                  id=""
+                  name={getEntityName(entityData.owner)}
+                  width="20"
+                />
+                <span className="tw-ml-1">
+                  {getEntityName(entityData.owner)}
                 </span>
-              ) : (
-                <span className="tw-text-grey-muted tw-ml-1">
-                  {t('label.no-entity', { entity: t('label.owner') })}
-                </span>
-              )}
-            </span>
-          </div>
-
-          <p data-testid="tier">
-            {entityTier ? (
-              entityTier
+              </span>
             ) : (
-              <span className="tw-text-grey-muted">
-                {t('label.no-entity', { entity: t('label.tier') })}
+              <span className="tw-text-grey-muted tw-ml-1">
+                {t('label.no-entity', { entity: t('label.owner') })}
               </span>
             )}
-          </p>
-
-          <p data-testid="tags">{entityTags}</p>
-
-          {getColumnDetails()}
+          </span>
         </div>
+
+        <p data-testid="tier">
+          {entityTier ? (
+            entityTier
+          ) : (
+            <span className="tw-text-grey-muted">
+              {t('label.no-entity', { entity: t('label.tier') })}
+            </span>
+          )}
+        </p>
+
+        <p data-testid="tags">{entityTags}</p>
+
+        {getColumnDetails()}
       </div>
     </TaskPageLayout>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
index 32781d9d7c9..ab4a328412d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestTagPage/RequestTagPage.tsx
@@ -190,21 +190,21 @@ const RequestTag = () => {
 
   return (
     <TaskPageLayout>
-      <TitleBreadcrumb
-        titleLinks={[
-          ...getBreadCrumbList(entityData, entityType as EntityType),
-          {
-            name: t('label.create-entity', {
-              entity: t('label.task'),
-            }),
-            activeTitle: true,
-            url: '',
-          },
-        ]}
-      />
-      <div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
+      <Space className="w-full" direction="vertical" size="middle">
+        <TitleBreadcrumb
+          titleLinks={[
+            ...getBreadCrumbList(entityData, entityType as EntityType),
+            {
+              name: t('label.create-entity', {
+                entity: t('label.task'),
+              }),
+              activeTitle: true,
+              url: '',
+            },
+          ]}
+        />
         <Card
-          className="tw-col-span-2"
+          className="m-t-0"
           key="request-tags"
           style={{ ...cardStyles }}
           title={t('label.create-entity', {
@@ -265,48 +265,48 @@ const RequestTag = () => {
             </Form.Item>
           </Form>
         </Card>
+      </Space>
 
-        <div className="tw-pl-2" data-testid="entity-details">
-          <h6 className="tw-text-base">
-            {capitalize(entityType)} {t('label.detail-plural')}
-          </h6>
-          <div className="tw-flex tw-mb-4">
-            <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
-            <span>
-              {entityData.owner ? (
-                <span className="tw-flex tw-ml-1">
-                  <ProfilePicture
-                    displayName={getEntityName(entityData.owner)}
-                    id=""
-                    name={getEntityName(entityData.owner)}
-                    width="20"
-                  />
-                  <span className="tw-ml-1">
-                    {getEntityName(entityData.owner)}
-                  </span>
+      <div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
+        <h6 className="tw-text-base">
+          {capitalize(entityType)} {t('label.detail-plural')}
+        </h6>
+        <div className="tw-flex tw-mb-4">
+          <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
+          <span>
+            {entityData.owner ? (
+              <span className="tw-flex tw-ml-1">
+                <ProfilePicture
+                  displayName={getEntityName(entityData.owner)}
+                  id=""
+                  name={getEntityName(entityData.owner)}
+                  width="20"
+                />
+                <span className="tw-ml-1">
+                  {getEntityName(entityData.owner)}
                 </span>
-              ) : (
-                <span className="tw-text-grey-muted tw-ml-1">
-                  {t('label.no-entity', { entity: t('label.owner') })}
-                </span>
-              )}
-            </span>
-          </div>
-
-          <p data-testid="tier">
-            {entityTier ? (
-              entityTier
+              </span>
             ) : (
-              <span className="tw-text-grey-muted">
-                {t('label.no-entity', { entity: t('label.tier') })}
+              <span className="tw-text-grey-muted tw-ml-1">
+                {t('label.no-entity', { entity: t('label.owner') })}
               </span>
             )}
-          </p>
-
-          <p data-testid="tags">{entityTags}</p>
-
-          {getColumnDetails()}
+          </span>
         </div>
+
+        <p data-testid="tier">
+          {entityTier ? (
+            entityTier
+          ) : (
+            <span className="tw-text-grey-muted">
+              {t('label.no-entity', { entity: t('label.tier') })}
+            </span>
+          )}
+        </p>
+
+        <p data-testid="tags">{entityTags}</p>
+
+        {getColumnDetails()}
       </div>
     </TaskPageLayout>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/TaskDetailPage/TaskDetailPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/TaskDetailPage/TaskDetailPage.tsx
index f8dc0986044..2f795c05897 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/TaskDetailPage/TaskDetailPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/TaskDetailPage/TaskDetailPage.tsx
@@ -12,7 +12,7 @@
  */
 
 import { CheckOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons';
-import { Button, Card, Dropdown, Layout, MenuProps, Tabs } from 'antd';
+import { Button, Card, Dropdown, Layout, MenuProps, Space, Tabs } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import ActivityFeedEditor from 'components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor';
@@ -668,9 +668,10 @@ const TaskDetailPage = () => {
                     />
                   )}
 
-                  <div
-                    className="tw-flex tw-justify-end"
-                    data-testid="task-cta-buttons">
+                  <Space
+                    className="m-t-xss"
+                    data-testid="task-cta-buttons"
+                    size="small">
                     {(hasEditAccess() || isCreator) && !isTaskClosed && (
                       <Button
                         className="ant-btn-link-custom"
@@ -711,7 +712,7 @@ const TaskDetailPage = () => {
                         )}
                       </Fragment>
                     )}
-                  </div>
+                  </Space>
 
                   {isTaskClosed && <ClosedTask task={taskDetail.task} />}
                 </Card>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
index bc7778dd6a5..ac8c4fc6399 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateDescriptionPage/UpdateDescriptionPage.tsx
@@ -208,21 +208,22 @@ const UpdateDescription = () => {
 
   return (
     <TaskPageLayout>
-      <TitleBreadcrumb
-        titleLinks={[
-          ...getBreadCrumbList(entityData, entityType as EntityType),
-          {
-            name: t('label.create-entity', {
-              entity: t('label.task'),
-            }),
-            activeTitle: true,
-            url: '',
-          },
-        ]}
-      />
-      <div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
+      <Space className="w-full" direction="vertical" size="middle">
+        <TitleBreadcrumb
+          titleLinks={[
+            ...getBreadCrumbList(entityData, entityType as EntityType),
+            {
+              name: t('label.create-entity', {
+                entity: t('label.task'),
+              }),
+              activeTitle: true,
+              url: '',
+            },
+          ]}
+        />
+
         <Card
-          className="tw-col-span-2"
+          className="m-t-0"
           key="update-description"
           style={{ ...cardStyles }}
           title={t('label.create-entity', {
@@ -280,48 +281,47 @@ const UpdateDescription = () => {
             </Form.Item>
           </Form>
         </Card>
-
-        <div className="tw-pl-2" data-testid="entity-details">
-          <h6 className="tw-text-base">
-            {capitalize(entityType)} {t('label.detail-plural')}
-          </h6>
-          <div className="tw-flex tw-mb-4">
-            <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
-            <span>
-              {entityData.owner ? (
-                <span className="tw-flex tw-ml-1">
-                  <ProfilePicture
-                    displayName={getEntityName(entityData.owner)}
-                    id=""
-                    name={getEntityName(entityData.owner)}
-                    width="20"
-                  />
-                  <span className="tw-ml-1">
-                    {getEntityName(entityData.owner)}
-                  </span>
+      </Space>
+      <div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
+        <h6 className="tw-text-base">
+          {capitalize(entityType)} {t('label.detail-plural')}
+        </h6>
+        <div className="tw-flex tw-mb-4">
+          <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
+          <span>
+            {entityData.owner ? (
+              <span className="tw-flex tw-ml-1">
+                <ProfilePicture
+                  displayName={getEntityName(entityData.owner)}
+                  id=""
+                  name={getEntityName(entityData.owner)}
+                  width="20"
+                />
+                <span className="tw-ml-1">
+                  {getEntityName(entityData.owner)}
                 </span>
-              ) : (
-                <span className="tw-text-grey-muted tw-ml-1">
-                  {t('label.no-entity', { entity: t('label.owner') })}
-                </span>
-              )}
-            </span>
-          </div>
-
-          <p data-testid="tier">
-            {entityTier ? (
-              entityTier
+              </span>
             ) : (
-              <span className="tw-text-grey-muted">
-                {t('label.no-entity', { entity: t('label.tier') })}
+              <span className="tw-text-grey-muted tw-ml-1">
+                {t('label.no-entity', { entity: t('label.owner') })}
               </span>
             )}
-          </p>
-
-          <p data-testid="tags">{entityTags}</p>
-
-          {getColumnDetails()}
+          </span>
         </div>
+
+        <p data-testid="tier">
+          {entityTier ? (
+            entityTier
+          ) : (
+            <span className="tw-text-grey-muted">
+              {t('label.no-entity', { entity: t('label.tier') })}
+            </span>
+          )}
+        </p>
+
+        <p data-testid="tags">{entityTags}</p>
+
+        {getColumnDetails()}
       </div>
     </TaskPageLayout>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
index c6766e0befa..5a51e0ad6e2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/UpdateTagPage/UpdateTagPage.tsx
@@ -208,21 +208,21 @@ const UpdateTag = () => {
 
   return (
     <TaskPageLayout>
-      <TitleBreadcrumb
-        titleLinks={[
-          ...getBreadCrumbList(entityData, entityType as EntityType),
-          {
-            name: t('label.create-entity', {
-              entity: t('label.task'),
-            }),
-            activeTitle: true,
-            url: '',
-          },
-        ]}
-      />
-      <div className="tw-grid tw-grid-cols-3 tw-gap-x-2">
+      <Space className="w-full" direction="vertical" size="middle">
+        <TitleBreadcrumb
+          titleLinks={[
+            ...getBreadCrumbList(entityData, entityType as EntityType),
+            {
+              name: t('label.create-entity', {
+                entity: t('label.task'),
+              }),
+              activeTitle: true,
+              url: '',
+            },
+          ]}
+        />
         <Card
-          className="tw-col-span-2"
+          className="m-t-0"
           key="update-tags"
           style={{ ...cardStyles }}
           title={t('label.create-entity', {
@@ -285,48 +285,48 @@ const UpdateTag = () => {
             </Form.Item>
           </Form>
         </Card>
+      </Space>
 
-        <div className="tw-pl-2" data-testid="entity-details">
-          <h6 className="tw-text-base">
-            {capitalize(entityType)} {t('label.detail-plural')}
-          </h6>
-          <div className="tw-flex tw-mb-4">
-            <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
-            <span>
-              {entityData.owner ? (
-                <span className="tw-flex tw-ml-1">
-                  <ProfilePicture
-                    displayName={getEntityName(entityData.owner)}
-                    id=""
-                    name={getEntityName(entityData.owner)}
-                    width="20"
-                  />
-                  <span className="tw-ml-1">
-                    {getEntityName(entityData.owner)}
-                  </span>
+      <div className="m-t-xlg p-x-lg w-500" data-testid="entity-details">
+        <h6 className="tw-text-base">
+          {capitalize(entityType)} {t('label.detail-plural')}
+        </h6>
+        <div className="tw-flex tw-mb-4">
+          <span className="tw-text-grey-muted">{`${t('label.owner')}:`}</span>{' '}
+          <span>
+            {entityData.owner ? (
+              <span className="tw-flex tw-ml-1">
+                <ProfilePicture
+                  displayName={getEntityName(entityData.owner)}
+                  id=""
+                  name={getEntityName(entityData.owner)}
+                  width="20"
+                />
+                <span className="tw-ml-1">
+                  {getEntityName(entityData.owner)}
                 </span>
-              ) : (
-                <span className="tw-text-grey-muted tw-ml-1">
-                  {t('label.no-entity', { entity: t('label.owner') })}
-                </span>
-              )}
-            </span>
-          </div>
-
-          <p data-testid="tier">
-            {entityTier ? (
-              entityTier
+              </span>
             ) : (
-              <span className="tw-text-grey-muted">
-                {t('label.no-entity', { entity: t('label.tier') })}
+              <span className="tw-text-grey-muted tw-ml-1">
+                {t('label.no-entity', { entity: t('label.owner') })}
               </span>
             )}
-          </p>
-
-          <p data-testid="tags">{entityTags}</p>
-
-          {getColumnDetails()}
+          </span>
         </div>
+
+        <p data-testid="tier">
+          {entityTier ? (
+            entityTier
+          ) : (
+            <span className="tw-text-grey-muted">
+              {t('label.no-entity', { entity: t('label.tier') })}
+            </span>
+          )}
+        </p>
+
+        <p data-testid="tags">{entityTags}</p>
+
+        {getColumnDetails()}
       </div>
     </TaskPageLayout>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.test.tsx
index 2a3d05282b0..36a34d82ab4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.test.tsx
@@ -22,13 +22,8 @@ describe('Test TaskPageLayout Component', () => {
   it('Should render the component', async () => {
     render(<TaskPageLayout {...mockProps} />);
 
-    const leftSider = await screen.findByTestId('left-sider');
-    const rightSider = await screen.findByTestId('right-sider');
-
     const children = await screen.findByTestId('children');
 
-    expect(leftSider).toBeInTheDocument();
-    expect(rightSider).toBeInTheDocument();
     expect(children).toBeInTheDocument();
   });
 });
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.tsx
index 485c6482ade..771383b2783 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.tsx
@@ -11,22 +11,18 @@
  *  limitations under the License.
  */
 
-import { Layout } from 'antd';
+import PageContainerV1 from 'components/containers/PageContainerV1';
+import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import React, { FC, HTMLAttributes } from 'react';
-import { background, contentStyles } from '../TaskPage.styles';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface Props extends HTMLAttributes<HTMLDivElement> {}
 
 const TaskPageLayout: FC<Props> = ({ children }) => {
-  const { Content, Sider } = Layout;
-
   return (
-    <Layout style={{ ...background, height: '100vh' }}>
-      <Sider data-testid="left-sider" style={background} width={180} />
-      <Content style={contentStyles}>{children}</Content>
-      <Sider data-testid="right-sider" style={background} width={180} />
-    </Layout>
+    <PageContainerV1>
+      <PageLayoutV1 center>{children}</PageLayoutV1>
+    </PageContainerV1>
   );
 };
 
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 a8477a08e46..4622620953f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -276,6 +276,9 @@
 .opacity-0 {
   opacity: 0;
 }
+.opacity-50 {
+  opacity: 0.5;
+}
 .opacity-100 {
   opacity: 1;
 }
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 46912a3910b..55bf0c26bee 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
@@ -50,6 +50,9 @@
 .w-48 {
   width: 12rem;
 }
+.w-500 {
+  width: 500px;
+}
 .w-800 {
   width: 800px;
 }