feat(ui) Make HoverEntityTooltip width more dynamic (#6238)

datahub-project · Oct 24, 2022 · 18df38e · 18df38e
1 parent 7cdc9f7
commit 18df38e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
@@ -36,8 +36,8 @@ const PreviewContainer = styled.div`
     align-items: center;
 `;
 
-const LeftColumn = styled.div`
-    max-width: 60%;
+const LeftColumn = styled.div<{ expandWidth: boolean }>`
+    max-width: ${(props) => (props.expandWidth ? '100%' : '60%')};
 `;
 
 const RightColumn = styled.div`
@@ -245,9 +245,11 @@ export default function DefaultPreviewCard({
         event.stopPropagation();
     };
 
+    const shouldShowRightColumn = (topUsers && topUsers.length > 0) || (owners && owners.length > 0);
+
     return (
         <PreviewContainer data-testid={dataTestID} onMouseDown={onPreventMouseDown}>
-            <LeftColumn>
+            <LeftColumn expandWidth={!shouldShowRightColumn}>
                 <TitleContainer>
                     <PlatformContentView
                         platformName={platform}

diff --git a/datahub-web-react/src/app/recommendations/renderer/component/HoverEntityTooltip.tsx b/datahub-web-react/src/app/recommendations/renderer/component/HoverEntityTooltip.tsx
@@ -24,7 +24,7 @@ export const HoverEntityTooltip = ({ entity, canOpen = true, children }: Props)
             visible={canOpen ? undefined : false}
             color="white"
             placement="topRight"
-            overlayStyle={{ minWidth: 500 }}
+            overlayStyle={{ minWidth: 300, maxWidth: 500, width: 'fit-content' }}
             overlayInnerStyle={{ padding: 12 }}
             title={<a href={url}>{entityRegistry.renderPreview(entity.type, PreviewType.HOVER_CARD, entity)}</a>}
         >