From 024519f92bd85dcdb1e3ecdea9020023219745b7 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Wed, 25 Jan 2023 12:18:48 +0530
Subject: [PATCH] UI : Fix the alignment and view of Delete Modal (#9895)

* Fix the alignment and view of Delete Modal

* remove unwanted z-index
---
 .../ActivityFeed/ActivityFeedList/ActivityFeedList.less       | 1 +
 .../ActivityFeed/ActivityFeedList/ActivityFeedList.tsx        | 2 +-
 .../ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.tsx      | 4 ++--
 .../DeleteConfirmationModal/DeleteConfirmationModal.tsx       | 1 -
 openmetadata-ui/src/main/resources/ui/src/styles/app.less     | 4 ++++
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.less b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.less
index f4f5d98327e..be6c51202b3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.less
@@ -39,5 +39,6 @@
     margin-right: -8px;
     z-index: 300;
     background-color: @filters-container-bg;
+    z-index: 10;
   }
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx
index 86163d79c32..6d20b7e897c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx
@@ -267,7 +267,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
         <>
           {relativeDays.map((d, i) => {
             return (
-              <div data-testid={`feed${i}`} key={i}>
+              <div className="relative z-5" data-testid={`feed${i}`} key={i}>
                 <FeedListSeparator
                   className="relative m-y-xs"
                   relativeDay={d}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.tsx
index 76e513a1215..95c01a25924 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.tsx
@@ -79,12 +79,12 @@ const ActivityFeedPanel: FC<ActivityFeedPanelProp> = ({
   return (
     <div className={classNames('tw-h-full', className)}>
       <FeedPanelOverlay
-        className="tw-z-9997 tw-fixed tw-inset-0 tw-top-16 tw-h-full tw-w-3/5 tw-bg-black tw-opacity-40"
+        className="tw-fixed tw-inset-0 tw-top-16 tw-h-full tw-w-3/5 tw-bg-black tw-opacity-40 z-10"
         onCancel={onCancel}
       />
       <div
         className={classNames(
-          'tw-top-16 tw-right-0 tw-bottom-0 tw-w-2/5 tw-bg-white tw-fixed tw-shadow-md tw-transform tw-ease-in-out tw-duration-1000 tw-overflow-y-auto tw-z-9997',
+          'tw-top-16 tw-right-0 tw-bottom-0 tw-w-2/5 tw-bg-white tw-fixed tw-shadow-md tw-transform tw-ease-in-out tw-duration-1000 tw-overflow-y-auto z-10',
           {
             'tw-translate-x-0': open,
             'tw-translate-x-full': !open,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/DeleteConfirmationModal/DeleteConfirmationModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/DeleteConfirmationModal/DeleteConfirmationModal.tsx
index 92166b56cde..9725be469f6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/DeleteConfirmationModal/DeleteConfirmationModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/DeleteConfirmationModal/DeleteConfirmationModal.tsx
@@ -27,7 +27,6 @@ const DeleteConfirmationModal: FC<DeleteConfirmationModalProp> = ({
     <ConfirmationModal
       bodyText={t('message.confirm-delete-message')}
       cancelText={t('label.cancel')}
-      className="tw-w-auto tw-h-screen"
       confirmText={t('label.delete')}
       header={t('message.delete-message-question-mark')}
       visible={visible}
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 033aa3bf9d9..a8477a08e46 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -245,6 +245,10 @@
 .bg-white {
   background: @white;
 }
+
+.z-5 {
+  z-index: 5;
+}
 .z-10 {
   z-index: 10;
 }