fix(ui): fixed entity header truncate issue (#21489)

* fixed entity header

* remove fixed value

* removed unnnecessary changers

* removed unnnecessary changers

* centered all the button for glossery header

* fixed badge wrapping

* fixed sonar test cases

* removed row col from glossery header

* fixed spacing

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

@@ -204,7 +204,7 @@ const EntityHeaderTitle = ({
 
   return link && !isTourRoute ? (
     <Link
-      className="no-underline d-inline-block w-40  "
+      className="no-underline d-inline-block w-max-full entity-header-title-link"
       data-testid="entity-link"
       target={openEntityInNewPage ? '_blank' : '_self'}
       to={link}>

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/entity-info-drawer.less

@@ -34,6 +34,12 @@
 
   .ant-drawer-header {
     border-bottom: none;
+    align-items: flex-start;
+  }
+
+  .entity-header-title-link {
+    // added to fix title overlap with close button
+    max-width: 90%;
   }
 
   .ant-drawer-body {

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

@@ -11,13 +11,13 @@
  *  limitations under the License.
  */
 import Icon, { DownOutlined } from '@ant-design/icons';
-import { Button, Col, Dropdown, Row, Space, Tooltip, Typography } from 'antd';
+import { Button, Dropdown, Space, Tooltip, Typography } from 'antd';
 import ButtonGroup from 'antd/lib/button/button-group';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
-import { cloneDeep, toString } from 'lodash';
+import { cloneDeep, isEmpty, toString } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
@@ -77,7 +77,7 @@ import ChangeParentHierarchy from '../../Modals/ChangeParentHierarchy/ChangePare
 import StyleModal from '../../Modals/StyleModal/StyleModal.component';
 import { GlossaryStatusBadge } from '../GlossaryStatusBadge/GlossaryStatusBadge.component';
 import { GlossaryHeaderProps } from './GlossaryHeader.interface';
-
+import './glossery-header.less';
 const GlossaryHeader = ({
   onDelete,
   onAssetAdd,
@@ -257,8 +257,8 @@ const GlossaryHeader = ({
   const onStyleSave = async (data: Style) => {
     const style: Style = {
       // if color/iconURL is empty or undefined send undefined
-      color: data.color ? data.color : undefined,
+      color: !isEmpty(data.color) ? data.color : undefined,
-      iconURL: data.iconURL ? data.iconURL : undefined,
+      iconURL: !isEmpty(data.iconURL) ? data.iconURL : undefined,
     };
     const updatedDetails = {
       ...selectedData,
@@ -543,7 +543,7 @@ const GlossaryHeader = ({
 
   useEffect(() => {
     const { fullyQualifiedName, name } = selectedData;
-    handleBreadcrumb(fullyQualifiedName ? fullyQualifiedName : name);
+    handleBreadcrumb(fullyQualifiedName ?? name);
   }, [selectedData]);
 
   useEffect(() => {
@@ -554,8 +554,8 @@ const GlossaryHeader = ({
 
   return (
     <>
-      <Row gutter={[0, 16]} justify="space-between" wrap={false}>
+      <div className="glossary-header flex gap-4 justify-between no-wrap ">
-        <Col className="d-flex" flex="auto">
+        <div className="flex w-min-0 flex-auto">
           <EntityHeader
             badge={statusBadge}
             breadcrumb={breadcrumb}
@@ -565,8 +565,8 @@ const GlossaryHeader = ({
             serviceName=""
             titleColor={isGlossary ? undefined : selectedData.style?.color}
           />
-        </Col>
+        </div>
-        <Col flex="360px">
+        <div className="flex items-center">
           <div className="d-flex gap-3 justify-end">
             {!isVersionView && createButtons}
 
@@ -642,8 +642,8 @@ const GlossaryHeader = ({
               )}
             </ButtonGroup>
           </div>
-        </Col>
+        </div>
-      </Row>
+      </div>
       {selectedData && (
         <EntityDeleteModal
           bodyText={getEntityDeleteMessage(selectedData.name, '')}

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/glossery-header.less

@@ -0,0 +1,21 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+.glossary-header {
+  .entity-header-container {
+    max-width: 100%;
+  }
+  .status-badge {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+}