UI: Improvements from #9242 (#9434)

* Changed custom font size given inside activity feed cards to make it consistent with application

* Fixed popovers and date categories overlapping issue

* Fixed overlapping and emoticons not visible issue inside comment editor in conversation thread panel

* Fixed icons description editor in add team form overflowing out of modal

* Fixed search suggestion dropdown overlapping issue

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/ActivityFeedCard.tsx

@@ -194,6 +194,7 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
           placement="topRight"
           trigger="hover"
           visible={visible && !isEditPost}
+          zIndex={100}
           onVisibleChange={handleVisibleChange}>
           <Space align="start" className="w-full">
             <UserPopOverCard userName={feedDetail.from}>

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.less

@@ -37,7 +37,7 @@
     top: 0;
     margin-left: -8px;
     margin-right: -8px;
-    z-index: 10;
+    z-index: 300;
     background-color: @filters-container-bg;
   }
 }

openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.css

@@ -1062,7 +1062,15 @@
 button.ql-emoji {
   vertical-align: bottom;
 }
-#tab-panel {
+#emoji-palette > #tab-panel {
   gap: 4px;
-  margin-top: 8px;
+  padding-top: 8px;
+}
+
+#emoji-palette {
+  z-index: 9999;
+}
+
+.ap {
+  text-indent: 0px;
 }

openmetadata-ui/src/main/resources/ui/src/components/app-bar/Suggestions.tsx

@@ -318,7 +318,7 @@ const Suggestions = ({ searchText, isOpen, setIsOpen }: SuggestionProp) => {
           <div
             aria-labelledby="menu-button"
             aria-orientation="vertical"
-            className="tw-origin-top-right tw-absolute tw-z-20
+            className="tw-origin-top-right tw-absolute z-400
           tw-w-600 tw-mt-1 tw-rounded-md tw-shadow-lg
         tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 focus:tw-outline-none tw-ml-4"
             role="menu">

openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.css

@@ -236,9 +236,6 @@ li.ProseMirror-selectednode:after {
   position: relative;
   border: 1px solid #dadde6;
   height: 100%;
-  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial',
-    '나눔바른고딕', 'Nanum Barun Gothic', '맑은고딕', 'Malgun Gothic',
-    sans-serif;
   border-radius: 4px;
 }
 
@@ -821,9 +818,6 @@ li.ProseMirror-selectednode:after {
   font-size: 12px;
   border-radius: 3px;
   color: #fff;
-  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial',
-    '나눔바른고딕', 'Nanum Barun Gothic', '맑은고딕', 'Malgun Gothic',
-    sans-serif;
 }
 
 .toastui-editor-tooltip .arrow {
@@ -961,9 +955,6 @@ li.ProseMirror-selectednode:after {
   40 - tooltip
 */
 .ProseMirror {
-  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial',
-    '나눔바른고딕', 'Nanum Barun Gothic', '맑은고딕', 'Malgun Gothic',
-    sans-serif;
   color: #222;
   font-size: 13px;
   overflow-y: auto;
@@ -997,9 +988,6 @@ table.ProseMirror-selectednode {
   margin: 0;
   padding: 0;
   font-size: 13px;
-  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial',
-    '나눔바른고딕', 'Nanum Barun Gothic', '맑은고딕', 'Malgun Gothic',
-    sans-serif;
   z-index: 20;
 }
 

openmetadata-ui/src/main/resources/ui/src/pages/teams/AddTeamForm.tsx

@@ -90,7 +90,7 @@ const AddTeamForm: React.FC<AddTeamFormType> = ({
       }}
       title={t('label.add-team')}
       visible={visible}
-      width={650}
+      width={750}
       onCancel={onCancel}>
       <Form
         id="add-team-form"

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -269,6 +269,9 @@
 .z-10 {
   z-index: 10;
 }
+.z-400 {
+  z-index: 400;
+}
 
 .entity-details-container {
   height: 100%;