fix(ui): fix the ellipses and icon misplacement of entity headers (#11502)

* fix the ellipses and icon misplacement of entity headers

* changes as per commets

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx

@@ -28,6 +28,7 @@ const EntityHeaderTitle = ({
   openEntityInNewPage,
   deleted = false,
   serviceName,
+  badge,
 }: EntityHeaderTitleProps) => {
   const { t } = useTranslation();
   const location = useLocation();
@@ -43,29 +44,27 @@ const EntityHeaderTitle = ({
       data-testid={`${serviceName}-${name}`}
       gutter={8}
       wrap={false}>
-      <Col flex="45px">{icon}</Col>
+      <Col>{icon}</Col>
-      <Col flex="auto">
+      <Col className={deleted || badge ? 'w-max-full-140' : 'w-max-full-45'}>
-        <div>
+        <Typography.Text
-          <Typography.Text
+          className="m-b-0 d-block text-grey-muted text-md font-medium"
-            className="m-b-0 d-block text-grey-muted text-md font-medium"
+          data-testid="entity-header-name">
-            data-testid="entity-header-name">
+          {stringToHTML(name)}
-            {stringToHTML(name)}
+        </Typography.Text>
-          </Typography.Text>
 
-          <Typography.Text
+        <Typography.Text
-            className="m-b-0 d-block entity-header-display-name text-lg font-bold"
+          className="m-b-0 d-block entity-header-display-name text-lg font-bold"
-            data-testid="entity-header-display-name"
+          data-testid="entity-header-display-name"
-            ellipsis={{ tooltip: true }}>
+          ellipsis={{ tooltip: true }}>
-            {stringToHTML(displayName ?? name)}
+          {stringToHTML(displayName ?? name)}
-            {openEntityInNewPage && (
+          {openEntityInNewPage && (
-              <IconExternalLink
+            <IconExternalLink
-                className="anticon vertical-baseline m-l-xss"
+              className="anticon vertical-baseline m-l-xss"
-                height={14}
+              height={14}
-                width={14}
+              width={14}
-              />
+            />
-            )}
+          )}
-          </Typography.Text>
+        </Typography.Text>
-        </div>
       </Col>
       {deleted && (
         <Col className="self-end text-xs">
@@ -75,6 +74,7 @@ const EntityHeaderTitle = ({
           </div>
         </Col>
       )}
+      {badge && <Col className="self-end">{badge}</Col>}
     </Row>
   );
 

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts

@@ -18,4 +18,5 @@ export interface EntityHeaderTitleProps {
   openEntityInNewPage?: boolean;
   deleted?: boolean;
   serviceName: string;
+  badge?: React.ReactNode;
 }

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

@@ -363,12 +363,11 @@ const GlossaryHeader = ({
   return (
     <>
       <Row gutter={[0, 16]} justify="space-between" wrap={false}>
-        <Col>
+        <Col flex="auto">
           <EntityHeader
             breadcrumb={breadcrumb}
             entityData={selectedData}
             entityType={EntityType.GLOSSARY_TERM}
-            gutter="large"
             icon={
               isGlossary ? (
                 <IconFolder
@@ -389,7 +388,7 @@ const GlossaryHeader = ({
             serviceName=""
           />
         </Col>
-        <Col>
+        <Col flex="270px">
           <div style={{ textAlign: 'right' }}>
             <div>
               {createButtons}

openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx

@@ -366,8 +366,8 @@ const EntityPageInfo = ({
       className="w-full"
       data-testid="entity-page-info"
       direction="vertical">
-      <Row>
+      <Row wrap={false}>
-        <Col span={18}>
+        <Col flex="auto">
           <EntityHeader
             breadcrumb={titleLinks}
             entityData={{
@@ -384,7 +384,7 @@ const EntityPageInfo = ({
             serviceName={serviceType ?? ''}
           />
         </Col>
-        <Col className="d-flex justify-end item-start" span={6}>
+        <Col className="d-flex justify-end item-start" flex="320px">
           <Space align="center" id="version-and-follow-section">
             {!isUndefined(version) && (
               <VersionButton

openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardV2.tsx

@@ -151,8 +151,8 @@ const TableDataCardV2: React.FC<TableDataCardPropsV2> = forwardRef<
         onClick={() => {
           handleSummaryPanelDisplay && handleSummaryPanelDisplay(source, tab);
         }}>
-        <Row>
+        <Row wrap={false}>
-          <Col span={23}>
+          <Col flex="auto">
             <EntityHeader
               titleIsLink
               breadcrumb={breadcrumbs}
@@ -163,11 +163,11 @@ const TableDataCardV2: React.FC<TableDataCardPropsV2> = forwardRef<
               serviceName={source.serviceType ?? ''}
             />
           </Col>
-          <Col className="d-flex justify-end" span={1}>
+          {showCheckboxes && (
-            {showCheckboxes && (
+            <Col flex="20px">
               <Checkbox checked={checked} className="m-l-auto" />
-            )}
+            </Col>
-          </Col>
+          )}
         </Row>
 
         <div className="tw-pt-3">

openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx

@@ -847,8 +847,8 @@ const DatabaseDetails: FunctionComponent = () => {
             ) : (
               <>
                 {database && (
-                  <Row className="p-x-xs">
+                  <Row className="p-x-xs" wrap={false}>
-                    <Col span={23}>
+                    <Col flex="auto">
                       <EntityHeader
                         breadcrumb={slashedDatabaseName}
                         entityData={database}
@@ -862,7 +862,7 @@ const DatabaseDetails: FunctionComponent = () => {
                         serviceName={database.service.name ?? ''}
                       />
                     </Col>
-                    <Col className="d-flex justify-end" span={1}>
+                    <Col flex="30px">
                       <ManageButton
                         isRecursiveDelete
                         allowSoftDelete={false}

openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx

@@ -1090,8 +1090,8 @@ const ServicePage: FunctionComponent = () => {
           {servicePermission.ViewAll || servicePermission.ViewBasic ? (
             <Row data-testid="service-page">
               {serviceDetails && (
-                <Row className="w-full m-b-xs">
+                <Row className="w-full m-b-xs" wrap={false}>
-                  <Col span={22}>
+                  <Col flex="auto">
                     <EntityHeader
                       breadcrumb={slashedTableName}
                       entityData={serviceDetails}
@@ -1104,7 +1104,7 @@ const ServicePage: FunctionComponent = () => {
                       serviceName={serviceDetails.name}
                     />
                   </Col>
-                  <Col className="d-flex justify-end" span={2}>
+                  <Col flex="80px">
                     {serviceDetails?.serviceType !==
                       MetadataServiceType.OpenMetadata && (
                       <Tooltip

openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx

@@ -786,12 +786,18 @@ const TagsPage = () => {
         ) : (
           <div className="full-height" data-testid="tags-container">
             {currentClassification && (
-              <Space
+              <Row data-testid="header" wrap={false}>
-                align="start"
+                <Col flex="auto">
-                className="w-full justify-between"
-                data-testid="header">
-                <Space align="end">
                   <EntityHeaderTitle
+                    badge={
+                      currentClassification.provider === ProviderType.System ? (
+                        <AppBadge
+                          className="m--t-xss"
+                          icon={<LockIcon height={12} />}
+                          label={capitalize(currentClassification.provider)}
+                        />
+                      ) : null
+                    }
                     displayName={getEntityName(currentClassification)}
                     icon={
                       <IconTag
@@ -802,15 +808,9 @@ const TagsPage = () => {
                     name={currentClassification.name}
                     serviceName="classification"
                   />
-                  {currentClassification.provider === ProviderType.System && (
+                </Col>
-                    <AppBadge
+
-                      className="m--t-xss"
+                <Col className="d-flex justify-end item-start" flex="270px">
-                      icon={<LockIcon height={12} />}
-                      label={capitalize(currentClassification.provider)}
-                    />
-                  )}
-                </Space>
-                <div className="flex-center">
                   <Tooltip
                     title={
                       !(
@@ -881,8 +881,8 @@ const TagsPage = () => {
                         </Tooltip>
                       </Dropdown>
                     )}
-                </div>
+                </Col>
-              </Space>
+              </Row>
             )}
             <div className="m-b-sm m-t-xs" data-testid="description-container">
               <Description

openmetadata-ui/src/main/resources/ui/src/styles/components/size.less

@@ -132,6 +132,12 @@
 .w-max-13 {
   max-width: 13rem;
 }
+.w-max-full-45 {
+  max-width: calc(100% - 45px);
+}
+.w-max-full-140 {
+  max-width: calc(100% - 140px);
+}
 
 .w-auto {
   width: auto;