fix(Navigation/MapNode): minor fix for css [YTFRONT-4291]

ytsaurus · Aug 12, 2024 · e5932f8 · e5932f8
1 parent aff83de
commit e5932f8
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/packages/ui/src/ui/components/Tooltip/Tooltip.scss b/packages/ui/src/ui/components/Tooltip/Tooltip.scss
@@ -14,4 +14,11 @@
     &_block {
         display: unset;
     }
+
+    &_ellipsis {
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 }
diff --git a/packages/ui/src/ui/components/Tooltip/Tooltip.tsx b/packages/ui/src/ui/components/Tooltip/Tooltip.tsx
@@ -14,12 +14,13 @@ export type TooltipProps = Omit<
     theme?: PopoverProps['theme'] | 'fix-link-colors';
     children?: React.ReactNode;
     useFlex?: boolean;
+    ellipsis?: boolean;
 };
 
 const SHOW_HIDE_DELAY = 400;
 
 export function Tooltip(props: TooltipProps) {
-    const {content, className, children, theme, useFlex, ...rest} = props;
+    const {content, className, children, theme, useFlex, ellipsis, ...rest} = props;
 
     const anchorRef = React.useRef<HTMLDivElement>(null);
     const popoverRef = React.useRef<PopoverInstanceProps>(null);
@@ -66,7 +67,7 @@ export function Tooltip(props: TooltipProps) {
 
     return (
         <div
-            className={block({flex: useFlex, 'has-tooltip': Boolean(content)}, className)}
+            className={block({flex: useFlex, 'has-tooltip': Boolean(content), ellipsis}, className)}
             ref={anchorRef}
             onMouseOver={handleOpen}
             onMouseOut={handleClose}

diff --git a/packages/ui/src/ui/pages/accounts/AccountLink.tsx b/packages/ui/src/ui/pages/accounts/AccountLink.tsx
@@ -12,19 +12,22 @@ interface Props {
     className?: string;
     account?: string;
     cluster?: string;
+
+    inline?: boolean;
 }
 
 export function genAccountsUrl(cluster: string, account: string) {
     return `/${cluster}/${Page.ACCOUNTS}/${AccountsTab.GENERAL}?account=${account}`;
 }
 
 export default function AccountLink(props: Props) {
-    const {cluster: propsCluster, account, className} = props;
+    const {cluster: propsCluster, account, className, inline} = props;
     const currentCluster = useSelector(getCluster);
     const cluster = propsCluster || currentCluster;
 
     return (
         <Tooltip
+            ellipsis={inline}
             className={className}
             content={
                 !account ? null : (

diff --git a/packages/ui/src/ui/pages/navigation/content/MapNode/MapNodesTable.js b/packages/ui/src/ui/pages/navigation/content/MapNode/MapNodesTable.js
@@ -229,7 +229,7 @@ class MapNodesTable extends Component {
     }
 
     static renderAccount(item, columnName) {
-        return <AccountLink account={item[columnName]} />;
+        return <AccountLink account={item[columnName]} inline />;
     }
 
     get hotkeys() {