Fixed: UI inconsistency as per feedback #4192 (#4840)

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

@@ -467,11 +467,12 @@ const DashboardDetails = ({
             tabs={tabs}
           />
 
-          <div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
+          <div className="tw-flex-grow tw-flex tw-flex-col tw--mx-6 tw-px-7 tw-py-4">
+            <div className="tw-bg-white tw-flex-grow tw-p-4 tw-shadow tw-rounded-md">
               {activeTab === 1 && (
                 <>
                   <div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
-                  <div className="tw-col-span-full">
+                    <div className="tw-col-span-full tw--ml-5">
                       <Description
                         description={description}
                         entityFieldThreads={getEntityFieldThreadCounts(
@@ -528,7 +529,9 @@ const DashboardDetails = ({
                                 </span>
                               </Link>
                             </td>
-                          <td className="tableBody-cell">{chart.chartType}</td>
+                            <td className="tableBody-cell">
+                              {chart.chartType}
+                            </td>
                             <td className="tw-group tableBody-cell tw-relative">
                               <div className="tw-inline-block">
                                 <div
@@ -590,7 +593,9 @@ const DashboardDetails = ({
                                 </div>
                               ) : (
                                 <NonAdminAction
-                                html={getHtmlForNonAdminAction(Boolean(owner))}
+                                  html={getHtmlForNonAdminAction(
+                                    Boolean(owner)
+                                  )}
                                   isOwner={hasEditAccess()}
                                   permission={Operation.UpdateTags}
                                   position="left"
@@ -660,7 +665,7 @@ const DashboardDetails = ({
                 </div>
               )}
               {activeTab === 3 && (
-              <div className="tw-h-full">
+                <div className="tw-h-full tw-px-3">
                   <Entitylineage
                     addLineageHandler={addLineageHandler}
                     deleted={deleted}
@@ -700,6 +705,7 @@ const DashboardDetails = ({
             </div>
           </div>
         </div>
+      </div>
       {editChart && (
         <ModalWithMarkdownEditor
           header={`Edit Chart: "${editChart.chart.displayName}"`}

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

@@ -579,13 +579,13 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
             setActiveTab={setActiveTabHandler}
             tabs={tabs}
           />
-
-          <div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
+          <div className="tw-flex-grow tw-flex tw-flex-col tw--mx-6 tw-px-7 tw-py-4">
+            <div className="tw-bg-white tw-flex-grow tw-p-4 tw-shadow tw-rounded-md">
               {activeTab === 1 && (
                 <div
                   className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full"
                   id="schemaDetails">
-                <div className="tw-col-span-3">
+                  <div className="tw-col-span-3 tw--ml-5">
                     <Description
                       description={description}
                       entityFieldThreads={getEntityFieldThreadCounts(
@@ -712,6 +712,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
               {activeTab === 7 && (
                 <div
                   className={classNames(
+                    'tw-px-2',
                     location.pathname.includes(ROUTES.TOUR)
                       ? 'tw-h-70vh'
                       : 'tw-h-full'
@@ -762,6 +763,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
                 {getLoader()}
               </div>
             </div>
+          </div>
           {threadLink ? (
             <ActivityThreadPanel
               createThread={createThread}

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

@@ -393,11 +393,12 @@ const PipelineDetails = ({
             tabs={tabs}
           />
 
-          <div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
+          <div className="tw-flex-grow tw-flex tw-flex-col tw--mx-6 tw-px-7 tw-py-4">
+            <div className="tw-bg-white tw-flex-grow tw-p-4 tw-shadow tw-rounded-md">
               {activeTab === 1 && (
                 <>
                   <div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
-                  <div className="tw-col-span-full">
+                    <div className="tw-col-span-full tw--ml-5">
                       <Description
                         description={description}
                         entityFieldThreads={getEntityFieldThreadCounts(
@@ -541,7 +542,9 @@ const PipelineDetails = ({
                                   )}
                                 </div>
                               </td>
-                            <td className="tableBody-cell">{task.taskType}</td>
+                              <td className="tableBody-cell">
+                                {task.taskType}
+                              </td>
                             </tr>
                           ))}
                         </tbody>
@@ -578,7 +581,7 @@ const PipelineDetails = ({
                 />
               )}
               {activeTab === 4 && (
-              <div className="tw-h-full">
+                <div className="tw-h-full tw-px-3">
                   <Entitylineage
                     addLineageHandler={addLineageHandler}
                     deleted={deleted}
@@ -617,6 +620,7 @@ const PipelineDetails = ({
             </div>
           </div>
         </div>
+      </div>
       {editTask && (
         <ModalWithMarkdownEditor
           header={`Edit Task: "${editTask.task.displayName}"`}

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

@@ -387,12 +387,12 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
             setActiveTab={setActiveTabHandler}
             tabs={tabs}
           />
-
-          <div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
+          <div className="tw-flex-grow tw-flex tw-flex-col tw--mx-6 tw-px-7 tw-py-4">
+            <div className="tw-bg-white tw-flex-grow tw-p-4 tw-shadow tw-rounded-md">
               {activeTab === 1 && (
                 <>
                   <div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-w-full">
-                  <div className="tw-col-span-full">
+                    <div className="tw-col-span-full tw--ml-5">
                       <Description
                         description={description}
                         entityFieldThreads={getEntityFieldThreadCounts(
@@ -482,6 +482,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                 {getLoader()}
               </div>
             </div>
+          </div>
           {threadLink ? (
             <ActivityThreadPanel
               createThread={createThread}

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

@@ -25,7 +25,7 @@ type Item = {
   email: string;
   isActiveUser?: boolean;
   profilePhoto?: string;
-  teamCount?: string;
+  teamCount?: string | JSX.Element;
 };
 
 type Props = {
@@ -73,7 +73,7 @@ const UserDataCard = ({ item, onClick, onDelete, showTeams = true }: Props) => {
             )}
           </div>
           <p className="tw-truncate">{item.email}</p>
-          {showTeams && <p>Teams: {item.teamCount}</p>}
+          {showTeams && <div>Teams: {item.teamCount}</div>}
         </div>
       </div>
       {!isNil(onDelete) && (

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

@@ -18,6 +18,7 @@ import { getUserPath } from '../../constants/constants';
 import { EntityReference, User } from '../../generated/entity/teams/user';
 import { getEntityName } from '../../utils/CommonUtils';
 import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
+import PopOver from '../common/popover/PopOver';
 import Searchbar from '../common/searchbar/Searchbar';
 import Loader from '../Loader/Loader';
 import ConfirmationModal from '../Modals/ConfirmationModal/ConfirmationModal';
@@ -66,6 +67,35 @@ const UserDetails = ({
     setDeletingUser(undefined);
   };
 
+  const getTeamsText = (teams: EntityReference[]) => {
+    return teams.length > 1 ? (
+      <span>
+        {getEntityName(teams[0])}, &{' '}
+        <PopOver
+          html={
+            <span>
+              {teams.map((t, i) => {
+                return i >= 1 ? (
+                  <span className="tw-block tw-text-left" key={i}>
+                    {getEntityName(t)}
+                  </span>
+                ) : null;
+              })}
+            </span>
+          }
+          position="bottom"
+          theme="light"
+          trigger="mouseenter">
+          <span className="tw-underline tw-cursor-pointer">
+            {teams.length - 1} more
+          </span>
+        </PopOver>
+      </span>
+    ) : (
+      `${getEntityName(teams[0])}`
+    );
+  };
+
   const getUserCards = () => {
     return isUsersLoading ? (
       <Loader />
@@ -84,10 +114,8 @@ const UserDetails = ({
                 isActiveUser: !user.deleted,
                 profilePhoto: user.profile?.images?.image || '',
                 teamCount:
-                  user.teams && user.teams?.length
-                    ? user.teams
-                        ?.map((team) => team.displayName ?? team.name)
-                        ?.join(', ')
+                  user.teams && user.teams.length
+                    ? getTeamsText(user.teams)
                     : 'No teams',
               };