[issues-5528] UI improvements. (#5585)

openmetadata-ui/src/main/resources/ui/src/components/AdvancedSearch/AdvancedSearchDropDown.tsx

@@ -40,7 +40,7 @@ const AdvancedSearchDropDown: FC<Props> = ({
 
   return (
     <Dropdown
-      className="tw-self-center tw-mr-2 tw-cursor-pointer"
+      className="tw-self-end tw-mb-2 tw-mr-2 tw-cursor-pointer"
       data-testid="dropdown"
       overlay={menu}
       trigger={['click']}>

openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx

@@ -657,43 +657,45 @@ const Explore: React.FC<ExploreProps> = ({
 
   const fetchLeftPanel = () => {
     return (
-      <Card
+      <div className="tw-h-full">
-        data-testid="data-summary-container"
+        <Card
-        style={{
+          data-testid="data-summary-container"
-          border: '1px rgb(221, 227, 234) solid',
+          style={{
-          borderRadius: '8px',
+            border: '1px rgb(221, 227, 234) solid',
-          boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
+            borderRadius: '8px',
-          marginRight: '4px',
+            boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
-          marginLeft: '4px',
+            marginRight: '4px',
-          marginTop: '20px',
+            marginLeft: '4px',
-        }}>
+            marginTop: '20px',
-        <Fragment>
+          }}>
-          <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
+          <Fragment>
-            <Button
+            <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
-              className={classNames('tw-underline tw-pb-4')}
+              <Button
-              disabled={!getFilterCount(filters)}
+                className={classNames('tw-underline tw-pb-4')}
-              size="custom"
+                disabled={!getFilterCount(filters)}
-              theme="primary"
+                size="custom"
-              variant="link"
+                theme="primary"
-              onClick={() => resetFilters(true)}>
+                variant="link"
-              Clear All
+                onClick={() => resetFilters(true)}>
-            </Button>
+                Clear All
-          </div>
+              </Button>
-          <div className="tw-filter-seperator" />
+            </div>
-          {!error && (
+            <div className="tw-filter-seperator" />
-            <FacetFilter
+            {!error && (
-              aggregations={getAggrWithDefaultValue(
+              <FacetFilter
-                aggregations,
+                aggregations={getAggrWithDefaultValue(
-                visibleFilters
+                  aggregations,
-              )}
+                  visibleFilters
-              filters={getFacetedFilter()}
+                )}
-              showDeletedOnly={showDeleted}
+                filters={getFacetedFilter()}
-              onSelectDeleted={handleShowDeleted}
+                showDeletedOnly={showDeleted}
-              onSelectHandler={handleSelectedFilter}
+                onSelectDeleted={handleShowDeleted}
-            />
+                onSelectHandler={handleSelectedFilter}
-          )}
+              />
-        </Fragment>
+            )}
-      </Card>
+          </Fragment>
+        </Card>
+      </div>
     );
   };
 

openmetadata-ui/src/main/resources/ui/src/components/Explore/SortingDropDown.tsx

@@ -40,7 +40,7 @@ const SortingDropDown: FC<Props> = ({
 
   return (
     <Dropdown
-      className="tw-self-center tw-mr-2 tw-cursor-pointer"
+      className="tw-self-end tw-mb-2 tw-mr-2 tw-cursor-pointer"
       data-testid="dropdown"
       overlay={menu}
       trigger={['click']}>

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx

@@ -214,8 +214,8 @@ const GlossaryV1 = ({
 
   const fetchLeftPanel = () => {
     return (
-      <div className="tw-px-2" id="glossary-left-panel">
+      <div className="tw-h-full tw-px-2" id="glossary-left-panel">
-        <div className="tw-bg-white tw-shadow-box tw-border tw-border-border-gray tw-rounded-md tw-min-h-full tw-h-80vh tw-py-2">
+        <div className="tw-bg-white tw-shadow-box tw-border tw-border-border-gray tw-rounded-md tw-h-full tw-py-2">
           <div className="tw-flex tw-justify-between tw-items-center tw-px-3">
             <h6 className="tw-heading tw-text-base">Glossary</h6>
           </div>
@@ -251,7 +251,6 @@ const GlossaryV1 = ({
                   </p>
                 ) : (
                   <TreeView
-                    className="tw-px-2"
                     expandedKeys={expandedKey}
                     handleClick={handleTreeClick}
                     handleExpand={(key) => handleExpandedKey(key as string[])}

openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx

@@ -481,7 +481,7 @@ const GlossaryDetails = ({ isHasAccess, glossary, updateGlossary }: props) => {
           </div>
         </NonAdminAction>
       </div>
-      <div className="tw-flex tw-gap-4">
+      <div className="tw-flex tw-gap-3">
         <div className="tw-w-9/12">
           <div data-testid="description-container">
             <DescriptionV1
@@ -495,7 +495,7 @@ const GlossaryDetails = ({ isHasAccess, glossary, updateGlossary }: props) => {
             />
           </div>
         </div>
-        <div className="tw-w-3/12">
+        <div className="tw-w-3/12 tw-px-2">
           <Card action={ownerAction()} heading="Owner">
             <div className="tw-flex tw-items-center">
               {glossary.owner && getEntityName(glossary.owner) && (

openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx

@@ -481,7 +481,7 @@ const GlossaryTermsV1 = ({
 
   const summaryTab = () => {
     return (
-      <div className="tw-flex tw-gap-4">
+      <div className="tw-flex tw-gap-3">
         <div className="tw-w-9/12">
           <div data-testid="description-container">
             <DescriptionV1
@@ -623,7 +623,7 @@ const GlossaryTermsV1 = ({
             </Fragment>
           </Card>
         </div>
-        <div className="tw-w-3/12">
+        <div className="tw-px-2 tw-w-3/12">
           <Card action={addReviewerButton()} heading="Reviewer">
             <div>{getReviewerTabData()}</div>
           </Card>

openmetadata-ui/src/main/resources/ui/src/components/cardlist/CardListItem/CardWithListItem.tsx

@@ -101,7 +101,7 @@ const CardListItem: FunctionComponent<Props> = ({
             />
           </div>
           <div className="tw-flex tw-flex-col">
-            <h4 className={cardStyle.header.title}>{card.title}</h4>
+            <p className={cardStyle.header.title}>{card.title}</p>
             <p className={cardStyle.header.description}>
               {card.description.replace(/\*/g, '')}
             </p>

openmetadata-ui/src/main/resources/ui/src/components/common/TabsPane/TabsPane.tsx

@@ -51,7 +51,7 @@ const TabsPane = ({
   };
 
   return (
-    <div className={classNames('tw-bg-transparent tw--mx-6', className)}>
+    <div className={classNames('tw-bg-transparent', className)}>
       <nav
         className="tw-flex tw-items-center tw-justify-between tw-gh-tabs-container tw-px-7"
         data-testid="tabs"

openmetadata-ui/src/main/resources/ui/src/components/common/title-breadcrumb/title-breadcrumb.component.tsx

@@ -83,6 +83,7 @@ const TitleBreadcrumb: FunctionComponent<TitleBreadcrumbProps> = ({
                     className={classes}
                     style={{
                       maxWidth,
+                      fontSize: '14px',
                     }}
                     to={link.url}>
                     {link.name}