[issue-5394] Fixed alignment issues. (#5395)

* [issue-5394] Fixed alignment issues.

* minor fix

* minor fix

Co-authored-by: Vivek Ratnavel Subramanian <vivekratnavel90@gmail.com>
Co-authored-by: Sanket Shah <shahsank3t@users.noreply.github.com>

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

@@ -142,7 +142,7 @@ const ActivityFeedCard: FC<ActivityFeedCardProp> = ({
         onConfirmation={onConfirmation}
         onReactionSelect={onReactionSelect}
       />
-      <div className="tw-filter-seperator" />
+      <div className="tw-mx-8 tw-filter-seperator" />
       <FeedCardFooter
         isFooterVisible={isFooterVisible}
         lastReplyTimeStamp={lastReplyTimeStamp}

openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx

@@ -101,7 +101,7 @@ export const EntityListWithAntd: FunctionComponent<AntdEntityListProp> = ({
         ? entityList.map((item, index) => {
             return (
               <div
-                className="tw-flex tw-items-center tw-justify-between tw-mb-2"
+                className="tw-flex tw-items-center tw-justify-between"
                 data-testid={`${testIDText}-${getEntityName(
                   item as unknown as EntityReference
                 )}`}

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

@@ -16,6 +16,7 @@ import {
   faSortAmountUpAlt,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Card } from 'antd';
 import classNames from 'classnames';
 import { cloneDeep, isEmpty, lowerCase } from 'lodash';
 import {
@@ -465,7 +466,7 @@ const Explore: React.FC<ExploreProps> = ({
             'tw-flex tw-flex-row tw-justify-between tw-gh-tabs-container'
           )}>
           <div className="tw-flex">
-            <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
+            {/* <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
               <Button
                 className={classNames('tw-underline tw-mt-5', {
                   'tw-invisible': !getFilterCount(filters),
@@ -476,7 +477,7 @@ const Explore: React.FC<ExploreProps> = ({
                 onClick={() => resetFilters(true)}>
                 Clear All
               </Button>
-            </div>
+            </div> */}
             <div>
               {tabsInfo.map((tabDetail, index) => (
                 <button
@@ -656,17 +657,43 @@ const Explore: React.FC<ExploreProps> = ({
 
   const fetchLeftPanel = () => {
     return (
-      <Fragment>
-        {!error && (
-          <FacetFilter
-            aggregations={getAggrWithDefaultValue(aggregations, visibleFilters)}
-            filters={getFacetedFilter()}
-            showDeletedOnly={showDeleted}
-            onSelectDeleted={handleShowDeleted}
-            onSelectHandler={handleSelectedFilter}
-          />
-        )}
-      </Fragment>
+      <Card
+        data-testid="data-summary-container"
+        style={{
+          border: '1px rgb(221, 227, 234) solid',
+          borderRadius: '8px',
+          boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
+          marginRight: '4px',
+          marginLeft: '4px',
+          marginTop: '20px',
+        }}>
+        <Fragment>
+          <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
+            <Button
+              className={classNames('tw-underline tw-pb-4')}
+              disabled={!getFilterCount(filters)}
+              size="custom"
+              theme="primary"
+              variant="link"
+              onClick={() => resetFilters(true)}>
+              Clear All
+            </Button>
+          </div>
+          <div className="tw-filter-seperator" />
+          {!error && (
+            <FacetFilter
+              aggregations={getAggrWithDefaultValue(
+                aggregations,
+                visibleFilters
+              )}
+              filters={getFacetedFilter()}
+              showDeletedOnly={showDeleted}
+              onSelectDeleted={handleShowDeleted}
+              onSelectHandler={handleSelectedFilter}
+            />
+          )}
+        </Fragment>
+      </Card>
     );
   };
 
@@ -675,10 +702,7 @@ const Explore: React.FC<ExploreProps> = ({
 
   return (
     <Fragment>
-      {!connectionError && getTabs()}
-      <PageLayout
-        leftPanel={Boolean(!error) && fetchLeftPanel()}
-        rightPanel={Boolean(!error) && <></>}>
+      <PageLayout leftPanel={Boolean(!error) && fetchLeftPanel()}>
         {advanceFieldCheck && (
           <AdvancedFields
             fields={selectedAdvancedFields}
@@ -691,18 +715,21 @@ const Explore: React.FC<ExploreProps> = ({
         {error ? (
           <ErrorPlaceHolderES errorMessage={error} type="error" />
         ) : (
-          <SearchedData
-            showResultCount
-            currentPage={currentPage}
-            data={data}
-            isFilterSelected={isFilterSelected}
-            isLoading={
-              !location.pathname.includes(ROUTES.TOUR) && isEntityLoading
-            }
-            paginate={paginate}
-            searchText={searchText}
-            totalValue={totalNumberOfValue}
-          />
+          <>
+            {!connectionError && getTabs()}
+            <SearchedData
+              showResultCount
+              currentPage={currentPage}
+              data={data}
+              isFilterSelected={isFilterSelected}
+              isLoading={
+                !location.pathname.includes(ROUTES.TOUR) && isEntityLoading
+              }
+              paginate={paginate}
+              searchText={searchText}
+              totalValue={totalNumberOfValue}
+            />
+          </>
         )}
       </PageLayout>
     </Fragment>

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

@@ -127,7 +127,7 @@ const MyAssetStats: FunctionComponent<Props> = ({
       }}>
       {Object.values(dataSummary).map((data, index) => (
         <div
-          className="tw-flex tw-items-center tw-justify-between tw-mb-2"
+          className="tw-flex tw-items-center tw-justify-between"
           data-testid={`${data.dataTestId}-summary`}
           key={index}>
           <div className="tw-flex">

openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx

@@ -52,7 +52,7 @@ const RecentSearchedTermsAntd: FunctionComponent = () => {
           recentlySearchedTerms.map((item, index) => {
             return (
               <div
-                className="tw-flex tw-items-center tw-justify-between tw-mb-2 tw-group"
+                className="tw-flex tw-items-center tw-justify-between tw-group"
                 data-testid={`Recently-Search-${item.term}`}
                 key={index}>
                 <div className="tw-flex">

openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx

@@ -11,7 +11,6 @@
  *  limitations under the License.
  */
 
-import { Card } from 'antd';
 import classNames from 'classnames';
 import { toLower } from 'lodash';
 import { AggregationType, Bucket, FilterObject } from 'Models';
@@ -175,103 +174,90 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
 
   return (
     <>
-      <Card
-        style={{
-          border: '1px rgb(221, 227, 234) solid',
-          borderRadius: '8px',
-          boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
-          marginRight: '4px',
-          marginLeft: '4px',
-        }}>
+      <div
+        className="sidebar-my-data-holder mt-2 mb-3"
+        data-testid="show-deleted-cntnr">
         <div
-          className="sidebar-my-data-holder mt-2 mb-3"
-          data-testid="show-deleted-cntnr">
-          <div
-            className="filter-group tw-justify-between tw-mb-2"
-            data-testid="filter-container-deleted">
-            <div className="tw-flex">
-              <div className="filters-title tw-w-40 tw-truncate custom-checkbox-label">
-                Show Deleted
-              </div>
-            </div>
-            <div
-              className={classNames(
-                'toggle-switch tw-mr-0',
-                showDeletedOnly ? 'open' : null
-              )}
-              data-testid="show-deleted"
-              onClick={() => {
-                onSelectDeleted?.(!showDeletedOnly);
-              }}>
-              <div className="switch" />
+          className="filter-group tw-justify-between tw-mb-2"
+          data-testid="filter-container-deleted">
+          <div className="tw-flex">
+            <div className="filters-title tw-w-40 tw-truncate custom-checkbox-label">
+              Show Deleted
             </div>
           </div>
+          <div
+            className={classNames(
+              'toggle-switch tw-mr-0',
+              showDeletedOnly ? 'open' : null
+            )}
+            data-testid="show-deleted"
+            onClick={() => {
+              onSelectDeleted?.(!showDeletedOnly);
+            }}>
+            <div className="switch" />
+          </div>
         </div>
-        {getSeparator(aggregations.length, 0)}
-        {aggregations.map((aggregation: AggregationType, index: number) => {
-          return (
-            <Fragment key={index}>
-              {aggregation.buckets.length > 0 ? (
-                <div data-testid={aggregation.title}>
-                  <div className="tw-flex tw-justify-between tw-flex-col">
-                    <h6
-                      className="tw-heading tw-mb-0"
-                      data-testid="filter-heading">
-                      {
-                        facetFilterPlaceholder.find(
-                          (filter) => filter.name === aggregation.title
-                        )?.value
-                      }
-                    </h6>
-                    <div className="tw-flex tw-mt-1.5">
-                      {onSelectAllFilter && (
+      </div>
+      {getSeparator(aggregations.length, 0)}
+      {aggregations.map((aggregation: AggregationType, index: number) => {
+        return (
+          <Fragment key={index}>
+            {aggregation.buckets.length > 0 ? (
+              <div data-testid={aggregation.title}>
+                <div className="tw-flex tw-justify-between tw-flex-col">
+                  <h6
+                    className="tw-heading tw-mb-0"
+                    data-testid="filter-heading">
+                    {
+                      facetFilterPlaceholder.find(
+                        (filter) => filter.name === aggregation.title
+                      )?.value
+                    }
+                  </h6>
+                  <div className="tw-flex tw-mt-1.5">
+                    {onSelectAllFilter && (
+                      <span
+                        className="link-text tw-text-xs"
+                        onClick={() => {
+                          if (isSelectAllFilter(aggregation)) {
+                            onSelectAllFilter(
+                              toLower(aggregation.title) as keyof FilterObject,
+                              aggregation.buckets.map((b) => b.key)
+                            );
+                          }
+                        }}>
+                        Select All
+                      </span>
+                    )}
+                    {onClearFilter && (
+                      <>
+                        <span className="tw-text-xs tw-px-2">|</span>
                         <span
-                          className="link-text tw-text-xs"
+                          className="link-text tw-text-xs tw-text-grey-muted"
                           onClick={() => {
-                            if (isSelectAllFilter(aggregation)) {
-                              onSelectAllFilter(
-                                toLower(
-                                  aggregation.title
-                                ) as keyof FilterObject,
-                                aggregation.buckets.map((b) => b.key)
+                            if (isClearFilter(aggregation)) {
+                              onClearFilter(
+                                toLower(aggregation.title) as keyof FilterObject
                               );
                             }
                           }}>
-                          Select All
+                          Deselect All
                         </span>
-                      )}
-                      {onClearFilter && (
-                        <>
-                          <span className="tw-text-xs tw-px-2">|</span>
-                          <span
-                            className="link-text tw-text-xs tw-text-grey-muted"
-                            onClick={() => {
-                              if (isClearFilter(aggregation)) {
-                                onClearFilter(
-                                  toLower(
-                                    aggregation.title
-                                  ) as keyof FilterObject
-                                );
-                              }
-                            }}>
-                            Deselect All
-                          </span>
-                        </>
-                      )}
-                    </div>
+                      </>
+                    )}
                   </div>
-                  <div
-                    className="sidebar-my-data-holder mt-2 mb-3"
-                    data-testid={`filter-containers-${index}`}>
-                    {getFilterItems(aggregation)}
-                  </div>
-                  {getSeparator(aggregations.length, index)}
                 </div>
-              ) : null}
-            </Fragment>
-          );
-        })}
-      </Card>
+                <div
+                  className="sidebar-my-data-holder mt-2 mb-3"
+                  data-testid={`filter-containers-${index}`}>
+                  {getFilterItems(aggregation)}
+                </div>
+                {getSeparator(aggregations.length, index)}
+              </div>
+            ) : null}
+          </Fragment>
+        );
+      })}
     </>
   );
 };

openmetadata-ui/src/main/resources/ui/src/styles/x-master.css

@@ -781,7 +781,7 @@ body .profiler-graph .recharts-active-dot circle {
 #left-panel {
   position: fixed;
   overflow-y: scroll;
-  width: 300px;
+  width: 304px;
   height: calc(100vh - 90px);
 }
 
@@ -819,7 +819,7 @@ body .profiler-graph .recharts-active-dot circle {
   position: relative;
 }
 .page-layout-container.l3-col {
-  grid-template-columns: 300px auto 300px;
+  grid-template-columns: 304px auto 304px;
 }
 .page-layout-container.l2-ltr-col {
   grid-template-columns: 350px auto auto;
@@ -968,7 +968,7 @@ code {
 }
 
 .ant-card-body {
-  padding: 12px;
+  padding: 14px;
 }
 
 .ant-card-head-title {
@@ -985,6 +985,7 @@ code {
 }
 
 .ant-card-head {
+  padding: 0 14px;
   font-size: 14px;
   min-height: 20px;
 }
@@ -992,7 +993,8 @@ code {
 .ant-card-extra {
   padding: 0px;
 }
-
+/* 
+*/
 /* Reaction CSS Start */
 .ant-btn-add-reactions:hover,
 .ant-btn-add-reactions:focus {
@@ -1051,3 +1053,13 @@ code {
 .ant-select-single .ant-select-selector .ant-select-selection-search {
   left: 4px;
 }
+
+@media only screen and (max-width: 1440px) {
+  #left-panel {
+    width: 256px;
+  }
+
+  .page-layout-container.l3-col {
+    grid-template-columns: 256px auto 256px;
+  }
+}