Fix #5295 UI layout fixes on setting tab. (#5541)

Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
2025-08-23 08:28:10 +00:00 · 2022-06-22 22:49:10 +05:30 · 2022-06-22 22:49:10 +05:30 · bdfee26533
commit bdfee26533
parent 2b05f6a17a
11 changed files with 335 additions and 282 deletions
--- a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js
@ -96,13 +96,10 @@ describe('Glossary page should work properly', () => {
  beforeEach(() => {
    cy.goToHomePage();
    // redirecting to glossary page
-    cy.get(
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
-    )
+    cy.get('[data-testid="appbar-item-glossary"]')
      .scrollIntoView()
      .should('be.visible')
      .click();
-    cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
    // Todo: need to remove below uncaught exception once tree-view error resolves
    cy.on('uncaught:exception', () => {
      // return false to prevent the error from
@ -321,13 +318,10 @@ describe('Glossary page should work properly', () => {

    addNewTagToEntity(entity, term);

-    cy.get(
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
-    )
+    cy.get('[data-testid="appbar-item-glossary"]')
      .scrollIntoView()
      .should('be.visible')
      .click();
-    cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
    goToAssetsTab(term);
    cy.get('[data-testid="column"] > :nth-child(1)')
      .contains(entity)
@ -377,13 +371,11 @@ describe('Glossary page should work properly', () => {
      .should('be.visible')
      .click();
    cy.get('[data-testid="saveAssociatedTag"]').scrollIntoView().click();
-    cy.get(
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
-    )
+
+    cy.get('[data-testid="appbar-item-glossary"]')
      .scrollIntoView()
      .should('be.visible')
      .click();
-    cy.get('[data-testid="menu-item-Glossaries"]').should('be.visible').click();
    cy.wait(500);
    goToAssetsTab(term);
    cy.get('.tableBody-cell')
--- a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Tags.spec.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Tags.spec.js
@ -17,12 +17,7 @@ import { NEW_TAG, NEW_TAG_CATEGORY, SEARCH_ENTITY_TABLE } from '../../constants/
 describe('Tags page should work', () => {
  beforeEach(() => {
    cy.goToHomePage();
-    cy.get(
-      '.tw-ml-5 > [data-testid="dropdown-item"] > div > [data-testid="menu-button"]'
-    )
-      .should('be.visible')
-      .click();
-    cy.get('[data-testid="menu-item-Tags"]').should('be.visible').click();
+    cy.get('[data-testid="appbar-item-tags"]').should('be.visible').click();
  });

  it('Required Details should be available', () => {
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx
@ -12,6 +12,7 @@
 */

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Card } from 'antd';
 import { capitalize } from 'lodash';
 import React from 'react';
 import { TITLE_FOR_NON_ADMIN_ACTION } from '../../constants/constants';
@ -22,7 +23,7 @@ import { getActiveCatClass, getCountBadge } from '../../utils/CommonUtils';
 import { getActiveUsers } from '../../utils/TeamUtils';
 import { Button } from '../buttons/Button/Button';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
-import PageLayout from '../containers/PageLayout';
+import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
 import Loader from '../Loader/Loader';
 import TeamDetails from '../TeamDetails/TeamDetails';
 import UserDetails from '../UserDetails/UserDetails';
@ -88,104 +89,106 @@ const TeamsAndUsers = ({
   */
  const fetchLeftPanel = () => {
    return (
-      <>
-        <div className="tw-mb-8">
-          <div
-            className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b"
-            data-testid="add-team-container">
-            <p className="tw-heading">Teams</p>
-            {hasAccess && (
-              <NonAdminAction
-                position="bottom"
-                title={TITLE_FOR_NON_ADMIN_ACTION}>
-                <Button
-                  className="tw-h-7 tw-px-2 tw-mb-4"
-                  data-testid="add-team-button"
-                  size="small"
-                  theme="primary"
-                  variant="contained"
-                  onClick={() => {
-                    handleAddTeam(true);
-                  }}>
-                  <FontAwesomeIcon icon="plus" />
-                </Button>
-              </NonAdminAction>
-            )}
-          </div>
-          {teams.map((team) => (
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
+        <>
+          <div className="tw-mb-8">
            <div
-              className="tw-flex tw-items-center tw-justify-between tw-mb-2 tw-cursor-pointer"
-              data-testid={`team-${team.name}`}
-              key={team.name}
-              onClick={() => {
-                changeCurrentTeam(team.name, false);
-              }}>
-              <div
-                className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-flex tw-justify-between ${getActiveCatClass(
-                  team.name,
-                  currentTeam?.name
-                )}`}>
-                <p
-                  className="tag-category label-category tw-self-center tw-truncate tw-w-52"
-                  data-testid="team-name"
-                  title={team.displayName ?? team.name}>
-                  {team.displayName ?? team.name}
-                </p>
-              </div>
-              {getCountBadge(
-                getActiveUsers(team.users).length,
-                '',
-                currentTeam?.name === team.name
-              )}
-            </div>
-          ))}
-        </div>
-        {hasAccess && (
-          <div>
-            <div className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b">
-              <p className="tw-heading">All Users</p>
+              className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b"
+              data-testid="add-team-container">
+              <p className="tw-heading">Teams</p>
              {hasAccess && (
                <NonAdminAction
                  position="bottom"
                  title={TITLE_FOR_NON_ADMIN_ACTION}>
                  <Button
                    className="tw-h-7 tw-px-2 tw-mb-4"
-                    data-testid="add-user-button"
+                    data-testid="add-team-button"
                    size="small"
                    theme="primary"
                    variant="contained"
-                    onClick={handleAddNewUser}>
+                    onClick={() => {
+                      handleAddTeam(true);
+                    }}>
                    <FontAwesomeIcon icon="plus" />
                  </Button>
                </NonAdminAction>
              )}
            </div>
-            {usersData.map((user) => (
+            {teams.map((team) => (
              <div
                className="tw-flex tw-items-center tw-justify-between tw-mb-2 tw-cursor-pointer"
-                data-testid={user.name}
-                key={user.name}
+                data-testid={`team-${team.name}`}
+                key={team.name}
                onClick={() => {
-                  changeCurrentTeam(user.name, true);
+                  changeCurrentTeam(team.name, false);
                }}>
                <div
                  className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-flex tw-justify-between ${getActiveCatClass(
-                    user.name,
-                    activeUserTab
+                    team.name,
+                    currentTeam?.name
                  )}`}>
                  <p
                    className="tag-category label-category tw-self-center tw-truncate tw-w-52"
-                    data-testid="user-type"
-                    title={capitalize(user.name)}>
-                    {capitalize(user.name)}
+                    data-testid="team-name"
+                    title={team.displayName ?? team.name}>
+                    {team.displayName ?? team.name}
                  </p>
                </div>
-                {getCountBadge(user.count, '', activeUserTab === user.name)}
+                {getCountBadge(
+                  getActiveUsers(team.users).length,
+                  '',
+                  currentTeam?.name === team.name
+                )}
              </div>
            ))}
          </div>
-        )}
-      </>
+          {hasAccess && (
+            <div>
+              <div className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b">
+                <p className="tw-heading">All Users</p>
+                {hasAccess && (
+                  <NonAdminAction
+                    position="bottom"
+                    title={TITLE_FOR_NON_ADMIN_ACTION}>
+                    <Button
+                      className="tw-h-7 tw-px-2 tw-mb-4"
+                      data-testid="add-user-button"
+                      size="small"
+                      theme="primary"
+                      variant="contained"
+                      onClick={handleAddNewUser}>
+                      <FontAwesomeIcon icon="plus" />
+                    </Button>
+                  </NonAdminAction>
+                )}
+              </div>
+              {usersData.map((user) => (
+                <div
+                  className="tw-flex tw-items-center tw-justify-between tw-mb-2 tw-cursor-pointer"
+                  data-testid={user.name}
+                  key={user.name}
+                  onClick={() => {
+                    changeCurrentTeam(user.name, true);
+                  }}>
+                  <div
+                    className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-flex tw-justify-between ${getActiveCatClass(
+                      user.name,
+                      activeUserTab
+                    )}`}>
+                    <p
+                      className="tag-category label-category tw-self-center tw-truncate tw-w-52"
+                      data-testid="user-type"
+                      title={capitalize(user.name)}>
+                      {capitalize(user.name)}
+                    </p>
+                  </div>
+                  {getCountBadge(user.count, '', activeUserTab === user.name)}
+                </div>
+              ))}
+            </div>
+          )}
+        </>
+      </Card>
    );
  };

@ -195,8 +198,9 @@ const TeamsAndUsers = ({
        <Loader />
      ) : (
        <div
-          className="tw-pb-3 tw-w-full tw-h-full tw-flex tw-flex-col"
-          data-testid="team-and-user-container">
+          className="tw-pb-3 tw-w-full tw-h-full tw-flex tw-flex-col tw-bg-white"
+          data-testid="team-and-user-container"
+          style={{ padding: '14px' }}>
          {!isTeamVisible ? (
            <UserDetails
              currentUserPage={currentUserPage}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/Webhooks.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/Webhooks.tsx
@ -11,6 +11,7 @@
 *  limitations under the License.
 */

+import { Card } from 'antd';
 import classNames from 'classnames';
 import { cloneDeep, isNil, startCase } from 'lodash';
 import React, { FunctionComponent, useEffect, useState } from 'react';
@ -25,7 +26,7 @@ import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder'
 import NextPrevious from '../common/next-previous/NextPrevious';
 import NonAdminAction from '../common/non-admin-action/NonAdminAction';
 import WebhookDataCard from '../common/webhook-data-card/WebhookDataCard';
-import PageLayout from '../containers/PageLayout';
+import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
 import { WebhooksProps } from './Webhooks.interface';

 const statuses = [
@ -86,55 +87,57 @@ const Webhooks: FunctionComponent<WebhooksProps> = ({

  const fetchLeftPanel = () => {
    return (
-      <>
-        <h6 className="tw-heading tw-text-base">Webhooks</h6>
-        <div className="tw-flex tw-justify-between tw-flex-col">
-          <h6 className="tw-heading tw-mb-0" data-testid="filter-heading">
-            Status
-          </h6>
-          <div className="tw-flex tw-mt-2" />
-        </div>
-        <div
-          className="sidebar-my-data-holder"
-          data-testid="filter-containers-1">
-          {statuses.map((statusType, index) => (
-            <div
-              className="filter-group tw-justify-between tw-mb-3"
-              data-testid={`status-type-${statusType.value}`}
-              key={index}>
-              <div className="tw-flex">
-                <input
-                  checked={selectedStatus.includes(statusType.value)}
-                  className="tw-mr-1 custom-checkbox"
-                  data-testid="checkbox"
-                  type="checkbox"
-                  onChange={() => {
-                    handleStatusSelection(statusType.value);
-                  }}
-                />
-                <div
-                  className="tw-flex tw-items-center filters-title tw-truncate custom-checkbox-label"
-                  data-testid="checkbox-label">
-                  <div className="tw-ml-1">{statusType.name}</div>
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
+        <>
+          <h6 className="tw-heading tw-text-base">Webhooks</h6>
+          <div className="tw-flex tw-justify-between tw-flex-col">
+            <h6 className="tw-heading tw-mb-0" data-testid="filter-heading">
+              Status
+            </h6>
+            <div className="tw-flex tw-mt-2" />
+          </div>
+          <div
+            className="sidebar-my-data-holder"
+            data-testid="filter-containers-1">
+            {statuses.map((statusType, index) => (
+              <div
+                className="filter-group tw-justify-between tw-mb-3"
+                data-testid={`status-type-${statusType.value}`}
+                key={index}>
+                <div className="tw-flex">
+                  <input
+                    checked={selectedStatus.includes(statusType.value)}
+                    className="tw-mr-1 custom-checkbox"
+                    data-testid="checkbox"
+                    type="checkbox"
+                    onChange={() => {
+                      handleStatusSelection(statusType.value);
+                    }}
+                  />
+                  <div
+                    className="tw-flex tw-items-center filters-title tw-truncate custom-checkbox-label"
+                    data-testid="checkbox-label">
+                    <div className="tw-ml-1">{statusType.name}</div>
+                  </div>
                </div>
              </div>
-            </div>
-          ))}
-        </div>
-      </>
+            ))}
+          </div>
+        </>
+      </Card>
    );
  };

  const fetchRightPanel = () => {
    return (
-      <>
-        <div className="tw-mb-5 tw-mt-11">
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
+        <div className="tw-my-2">
          The webhook allows external services to be notified of the metadata
          change events happening in your organization through APIs. Register
          callback URLs with webhook integration to receive metadata event
          notifications. You can add, list, update, and delete webhooks.
        </div>
-      </>
+      </Card>
    );
  };

@ -167,7 +170,7 @@ const Webhooks: FunctionComponent<WebhooksProps> = ({

  return data.length ? (
    <PageLayout leftPanel={fetchLeftPanel()} rightPanel={fetchRightPanel()}>
-      <div>
+      <div className="tw-bg-white" style={{ padding: '14px' }}>
        {filteredData.length ? (
          <>
            <div className="tw-flex tw-justify-end tw-items-center">
--- a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
@ -24,6 +24,14 @@ interface PageLayoutProp {
  classes?: string;
 }

+export const leftPanelAntCardStyle = {
+  border: '1px rgb(221, 227, 234) solid',
+  borderRadius: '8px',
+  boxShadow: '1px 1px 6px rgb(0 0 0 / 12%)',
+  marginRight: '4px',
+  marginLeft: '4px',
+};
+
 const PageLayout: FC<PageLayoutProp> = ({
  leftPanel,
  header,
--- a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx
@ -134,7 +134,7 @@ const DropDown: React.FC<DropDownProp> = ({

                {isDropDownIconVisible ? (
                  <DropdownIcon
-                    style={{ marginTop: '7px', color: normalLink }}
+                    style={{ marginTop: '5px', color: normalLink }}
                  />
                ) : null}
              </>
--- a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
@ -89,6 +89,26 @@ const NavBar = ({
                label="Settings"
                type="link"
              />
+              <NavLink
+                className="tw-nav focus:tw-no-underline"
+                data-testid="appbar-item-glossary"
+                id="glossary"
+                style={navStyle(pathname.startsWith('/glossary'))}
+                to={{
+                  pathname: '/glossary',
+                }}>
+                Glossaries
+              </NavLink>
+              <NavLink
+                className="tw-nav focus:tw-no-underline"
+                data-testid="appbar-item-tags"
+                id="tags"
+                style={navStyle(pathname.startsWith('/tags'))}
+                to={{
+                  pathname: '/tags',
+                }}>
+                Tags
+              </NavLink>
            </div>
          </div>
          <div
--- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
@ -417,10 +417,8 @@ export const navLinkSettings = [
    disabled: false,
    isAdminOnly: true,
  },
-  { name: 'Glossaries', to: '/glossary', disabled: false },
  { name: 'Roles', to: '/roles', disabled: false, isAdminOnly: true },
  { name: 'Services', to: '/services', disabled: false },
-  { name: 'Tags', to: '/tags', disabled: false },
  {
    name: 'Teams & Users',
    to: ROUTES.TEAMS_AND_USERS,
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesPage.component.tsx
@ -11,6 +11,7 @@
 *  limitations under the License.
 */

+import { Card } from 'antd';
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
@ -37,7 +38,9 @@ import Description from '../../components/common/description/Description';
 import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayout, {
+  leftPanelAntCardStyle,
+} from '../../components/containers/PageLayout';
 import Loader from '../../components/Loader/Loader';
 import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal';
 import AddRoleModal from '../../components/Modals/RoleModal/AddRoleModal';
@ -579,33 +582,39 @@ const RolesPage = () => {

  const fetchLeftPanel = (roles: Array<Role>) => {
    return (
-      <Fragment>
-        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
-          <h6
-            className="tw-heading tw-text-base"
-            data-testid="left-panel-title">
-            Roles
-          </h6>
-        </div>
-        {roles &&
-          roles.map((role) => (
-            <div
-              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
-                role.name,
-                currentRole?.name
-              )}`}
-              data-testid="role-name-container"
-              key={role.name}
-              onClick={() => setCurrentRole(role)}>
-              <p
-                className="tag-category label-category tw-self-center tw-truncate tw-w-52"
-                title={role.displayName}>
-                <span>{role.displayName}</span>{' '}
-              </p>
-              {role.defaultRole ? getDefaultBadge() : null}
-            </div>
-          ))}
-      </Fragment>
+      <Card
+        data-testid="data-summary-container"
+        style={leftPanelAntCardStyle}
+        title={
+          <div className="tw-flex tw-justify-between tw-items-center">
+            <h6
+              className="tw-heading tw-text-base"
+              data-testid="left-panel-title">
+              Roles
+            </h6>
+          </div>
+        }>
+        <Fragment>
+          {roles &&
+            roles.map((role) => (
+              <div
+                className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
+                  role.name,
+                  currentRole?.name
+                )}`}
+                data-testid="role-name-container"
+                key={role.name}
+                onClick={() => setCurrentRole(role)}>
+                <span
+                  className="tag-category label-category tw-self-center tw-truncate tw-w-52"
+                  title={role.displayName}>
+                  <span>{role.displayName}</span>{' '}
+                </span>
+                {role.defaultRole ? getDefaultBadge() : null}
+              </div>
+            ))}
+        </Fragment>
+      </Card>
    );
  };

@ -1113,7 +1122,10 @@ const RolesPage = () => {
            {isLoading ? (
              <Loader />
            ) : (
-              <div className="tw-pb-3" data-testid="role-container">
+              <div
+                className="tw-pb-3 tw-bg-white"
+                data-testid="role-container"
+                style={{ padding: '14px' }}>
                {getRolesContainer()}

                {getAddRoleForm()}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
@ -11,6 +11,7 @@
 *  limitations under the License.
 */

+import { Card } from 'antd';
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import { isNil } from 'lodash';
@ -25,7 +26,9 @@ import NextPrevious from '../../components/common/next-previous/NextPrevious';
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayout, {
+  leftPanelAntCardStyle,
+} from '../../components/containers/PageLayout';
 import Loader from '../../components/Loader/Loader';
 import {
  getServiceDetailsPath,
@ -231,36 +234,41 @@ const ServicesPage = () => {

  const fetchLeftPanel = () => {
    return (
-      <>
-        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
-          <h6 className="tw-heading tw-text-base">Services</h6>
-        </div>
+      <Card
+        data-testid="data-summary-container"
+        style={leftPanelAntCardStyle}
+        title={
+          <div className="tw-flex tw-justify-between tw-items-center">
+            <h6 className="tw-heading tw-text-base">Services</h6>
+          </div>
+        }>
+        <>
+          {getServiceTabs()?.map((tab, index) => {
+            return (
+              <div
+                className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
+                  tab.name,
+                  serviceName
+                )}`}
+                data-testid="tab"
+                key={index}
+                onClick={() => {
+                  handleTabChange(tab.name);
+                }}>
+                <p className="tw-text-center tw-self-center label-category">
+                  {tab.displayName}
+                </p>

-        {getServiceTabs()?.map((tab, index) => {
-          return (
-            <div
-              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
-                tab.name,
-                serviceName
-              )}`}
-              data-testid="tab"
-              key={index}
-              onClick={() => {
-                handleTabChange(tab.name);
-              }}>
-              <p className="tw-text-center tw-self-center label-category">
-                {tab.displayName}
-              </p>
-
-              {getCountBadge(
-                servicesCount[tab.name],
-                'tw-self-center',
-                tab.name === serviceName
-              )}
-            </div>
-          );
-        })}
-      </>
+                {getCountBadge(
+                  servicesCount[tab.name],
+                  'tw-self-center',
+                  tab.name === serviceName
+                )}
+              </div>
+            );
+          })}
+        </>
+      </Card>
    );
  };

@ -406,53 +414,56 @@ const ServicesPage = () => {
          className="tw-grid xl:tw-grid-cols-4 tw-grid-cols-2 tw-gap-4 tw-mb-4"
          data-testid="data-container">
          {serviceList.map((service, index) => (
-            <div
-              className="tw-card tw-flex tw-py-2 tw-px-3 tw-justify-between tw-text-grey-muted"
-              data-testid="service-card"
-              key={index}>
-              <div className="tw-flex tw-flex-col tw-justify-between tw-truncate">
-                <div>
-                  <Link to={getServiceDetailsPath(service.name, serviceName)}>
-                    <button>
-                      <h6
-                        className="tw-text-base tw-text-grey-body tw-font-medium tw-text-left tw-truncate tw-w-48"
-                        data-testid={`service-name-${getEntityName(
-                          service as EntityReference
-                        )}`}
-                        title={getEntityName(service as EntityReference)}>
-                        {getEntityName(service as EntityReference)}
-                      </h6>
-                    </button>
-                  </Link>
-                  <div
-                    className="tw-text-grey-body tw-pb-1 tw-break-all description-text"
-                    data-testid="service-description">
-                    {service.description ? (
-                      <RichTextEditorPreviewer
-                        enableSeeMoreVariant={false}
-                        markdown={service.description}
-                      />
-                    ) : (
-                      <span className="tw-no-description">No description</span>
-                    )}
+            <Card key={index} style={leftPanelAntCardStyle}>
+              <div
+                className="tw-flex tw-py-2 tw-px-3 tw-justify-between tw-text-grey-muted"
+                data-testid="service-card">
+                <div className="tw-flex tw-flex-col tw-justify-between tw-truncate">
+                  <div>
+                    <Link to={getServiceDetailsPath(service.name, serviceName)}>
+                      <button>
+                        <h6
+                          className="tw-text-base tw-text-grey-body tw-font-medium tw-text-left tw-truncate tw-w-48"
+                          data-testid={`service-name-${getEntityName(
+                            service as EntityReference
+                          )}`}
+                          title={getEntityName(service as EntityReference)}>
+                          {getEntityName(service as EntityReference)}
+                        </h6>
+                      </button>
+                    </Link>
+                    <div
+                      className="tw-text-grey-body tw-pb-1 tw-break-all description-text"
+                      data-testid="service-description">
+                      {service.description ? (
+                        <RichTextEditorPreviewer
+                          enableSeeMoreVariant={false}
+                          markdown={service.description}
+                        />
+                      ) : (
+                        <span className="tw-no-description">
+                          No description
+                        </span>
+                      )}
+                    </div>
+                    {getOptionalFields(service)}
+                  </div>
+                  <div className="" data-testid="service-type">
+                    <label className="tw-mb-0">Type:</label>
+                    <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
+                      {service.serviceType}
+                    </span>
                  </div>
-                  {getOptionalFields(service)}
                </div>
-                <div className="" data-testid="service-type">
-                  <label className="tw-mb-0">Type:</label>
-                  <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
-                    {service.serviceType}
-                  </span>
+                <div className="tw-flex tw-flex-col tw-justify-between tw-flex-none">
+                  <div
+                    className="tw-flex tw-justify-end"
+                    data-testid="service-icon">
+                    {getServiceLogo(service.serviceType || '', 'tw-h-8')}
+                  </div>
                </div>
              </div>
-              <div className="tw-flex tw-flex-col tw-justify-between tw-flex-none">
-                <div
-                  className="tw-flex tw-justify-end"
-                  data-testid="service-icon">
-                  {getServiceLogo(service.serviceType || '', 'tw-h-8')}
-                </div>
-              </div>
-            </div>
+            </Card>
          ))}
        </div>
      </Fragment>
@ -490,7 +501,7 @@ const ServicesPage = () => {
      <ErrorPlaceHolder>{errorMessage}</ErrorPlaceHolder>
    ) : (
      <PageLayout leftPanel={fetchLeftPanel()}>
-        <div data-testid="services-container">
+        <div data-testid="services-container" style={{ padding: '14px' }}>
          {getServiceList()}

          {getPagination()}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
@ -12,6 +12,7 @@
 */

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Card } from 'antd';
 import { AxiosError, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import { isUndefined, toLower } from 'lodash';
@ -34,7 +35,9 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
 import NonAdminAction from '../../components/common/non-admin-action/NonAdminAction';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayout, {
+  leftPanelAntCardStyle,
+} from '../../components/containers/PageLayout';
 import Loader from '../../components/Loader/Loader';
 import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal';
 import FormModal from '../../components/Modals/FormModal';
@ -397,52 +400,56 @@ const TagsPage = () => {

  const fetchLeftPanel = () => {
    return (
-      <>
-        <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
-          <h6 className="tw-heading tw-text-base">Tag Categories</h6>
-          <NonAdminAction position="bottom" title={TITLE_FOR_NON_ADMIN_ACTION}>
-            <Button
-              className={classNames('tw-h-7 tw-px-2 tw-mb-4', {
-                'tw-opacity-40': !isAdminUser && !isAuthDisabled,
-              })}
-              data-testid="add-category"
-              size="small"
-              theme="primary"
-              variant="contained"
-              onClick={() => {
-                setIsAddingCategory((prevState) => !prevState);
-                setErrorDataCategory(undefined);
-              }}>
-              <FontAwesomeIcon icon="plus" />
-            </Button>
-          </NonAdminAction>
-        </div>
-        {categories &&
-          categories.map((category: TagCategory) => (
-            <div
-              className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
-                category.name,
-                currentCategory?.name
-              )}`}
-              data-testid="side-panel-category"
-              key={category.name}
-              onClick={() => {
-                fetchCurrentCategory(category.name);
-              }}>
-              <p className="tw-text-center tw-self-center tag-category label-category">
-                {category.displayName ?? category.name}
-              </p>
+      <Card data-testid="data-summary-container" style={leftPanelAntCardStyle}>
+        <>
+          <div className="tw-flex tw-justify-between tw-items-center tw-mb-3 tw-border-b">
+            <h6 className="tw-heading tw-text-base">Tag Categories</h6>
+            <NonAdminAction
+              position="bottom"
+              title={TITLE_FOR_NON_ADMIN_ACTION}>
+              <Button
+                className={classNames('tw-h-7 tw-px-2 tw-mb-4', {
+                  'tw-opacity-40': !isAdminUser && !isAuthDisabled,
+                })}
+                data-testid="add-category"
+                size="small"
+                theme="primary"
+                variant="contained"
+                onClick={() => {
+                  setIsAddingCategory((prevState) => !prevState);
+                  setErrorDataCategory(undefined);
+                }}>
+                <FontAwesomeIcon icon="plus" />
+              </Button>
+            </NonAdminAction>
+          </div>
+          {categories &&
+            categories.map((category: TagCategory) => (
+              <div
+                className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${getActiveCatClass(
+                  category.name,
+                  currentCategory?.name
+                )}`}
+                data-testid="side-panel-category"
+                key={category.name}
+                onClick={() => {
+                  fetchCurrentCategory(category.name);
+                }}>
+                <p className="tw-text-center tw-self-center tag-category label-category">
+                  {category.displayName ?? category.name}
+                </p>

-              {getCountBadge(
-                currentCategory?.name === category.name
-                  ? currentCategory.children?.length
-                  : category.children?.length || 0,
-                'tw-self-center',
-                currentCategory?.name === category.name
-              )}
-            </div>
-          ))}
-      </>
+                {getCountBadge(
+                  currentCategory?.name === category.name
+                    ? currentCategory.children?.length
+                    : category.children?.length || 0,
+                  'tw-self-center',
+                  currentCategory?.name === category.name
+                )}
+              </div>
+            ))}
+        </>
+      </Card>
    );
  };

@ -458,7 +465,10 @@ const TagsPage = () => {
            {isLoading ? (
              <Loader />
            ) : (
-              <div className="full-height" data-testid="tags-container">
+              <div
+                className="full-height tw-bg-white"
+                data-testid="tags-container"
+                style={{ padding: '14px' }}>
                {currentCategory && (
                  <div
                    className="tw-flex tw-justify-between tw-items-center"