[ui] Add min-height to breadcrumbs to fix layout loop caused by Middl…

…eTruncate RAF (dagster-io#26127)

## Summary & Motivation

Fixes the flickering observed in
https://dagsterlabs.slack.com/archives/C03CZRZCZQQ/p1732546935350479.
When the sizing is async, the height of the element was briefly reduced
to the height of the `•••`, which causes an infinite loop of
re-rendering. The "30px" minimum height is the default value that would
be set if we were not overriding it here.

Also added a storybook so we can easily verify this behavior in the
future:

<img width="931" alt="image"
src="https://github.com/user-attachments/assets/5430f23a-f437-407c-97a1-336b6e09c67e">


## How I Tested These Changes

I added a storybook with the same code as the header and verified the
flickering is no longer an issue.

Co-authored-by: bengotow <[email protected]>

js_modules/dagster-ui/packages/ui-components/src/components/MiddleTruncate.tsx

@@ -38,7 +38,7 @@ export const MiddleTruncate = ({text, showTitle = true}: Props) => {
 
   // Use a layout effect to trigger the process of calculating the truncated text, for the
   // initial render.
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     window.requestAnimationFrame(calculateTargetStyle);
   }, [calculateTargetStyle]);
 

js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx

@@ -48,5 +48,6 @@ const PageHeaderContainer = styled(Box)`
    */
   .bp5-breadcrumbs {
     height: auto;
+    min-height: 30px;
   }
 `;

js_modules/dagster-ui/packages/ui-components/src/components/__stories__/MiddleTruncate.stories.tsx

@@ -1,13 +1,17 @@
+// eslint-disable-next-line no-restricted-imports
+import {Breadcrumbs2 as Breadcrumbs} from '@blueprintjs/popover2';
 import {Meta} from '@storybook/react';
 import faker from 'faker';
 import {useMemo, useRef, useState} from 'react';
+import styled from 'styled-components';
 
 import {Box} from '../Box';
 import {Colors} from '../Color';
 import {Icon} from '../Icon';
 import {MiddleTruncate} from '../MiddleTruncate';
 import {Slider} from '../Slider';
 import {Tag} from '../Tag';
+import {Heading, Title} from '../Text';
 
 // eslint-disable-next-line import/no-default-export
 export default {
@@ -240,3 +244,62 @@ export const Containers = () => {
     </>
   );
 };
+
+export const BreadcrumbsScenario = () => {
+  const breadcrumbs = [
+    {text: 's3', href: '#'},
+    {text: 'superdomain_1', href: '#'},
+    {text: 'subdomain_1', href: '#'},
+    {text: 'subsubsubsubdosubsubsubsubdoma', href: '#'},
+    {text: 'asset1', href: '#'},
+  ];
+  return (
+    <Title>
+      <Box flex={{alignItems: 'center', gap: 4}} style={{maxWidth: '500px'}}>
+        <BreadcrumbsWithSlashes
+          items={breadcrumbs}
+          currentBreadcrumbRenderer={({text, href}) => (
+            <span key={href}>
+              <TruncatedHeading>
+                <MiddleTruncate text={text as string} />
+              </TruncatedHeading>
+            </span>
+          )}
+          $numHeaderBreadcrumbs={breadcrumbs.length}
+          breadcrumbRenderer={({text, href}) => (
+            <span key={href}>
+              <TruncatedHeading>
+                <MiddleTruncate text={text as string} />
+              </TruncatedHeading>
+            </span>
+          )}
+          popoverProps={{
+            minimal: true,
+            modifiers: {offset: {enabled: true, options: {offset: [0, 8]}}},
+            popoverClassName: 'dagster-popover',
+          }}
+        />
+      </Box>
+    </Title>
+  );
+};
+
+const TruncatedHeading = styled(Heading)`
+  max-width: 200px;
+  overflow: hidden;
+`;
+
+// Only add slashes within the asset key path
+const BreadcrumbsWithSlashes = styled(Breadcrumbs)<{$numHeaderBreadcrumbs: number}>`
+  height: auto;
+
+  & li:nth-child(n + ${(p) => p.$numHeaderBreadcrumbs + 1})::after {
+    background: none;
+    font-size: 20px;
+    font-weight: bold;
+    color: ${Colors.textLighter()};
+    content: '/';
+    width: 8px;
+    line-height: 16px;
+  }
+`;

js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.oss.tsx

@@ -168,6 +168,13 @@ const BreadcrumbsWithSlashes = styled(Breadcrumbs)<{$numHeaderBreadcrumbs: numbe
     width: 8px;
     line-height: 16px;
   }
+  /**
+   * Blueprint breadcrumbs annoyingly have a built-in height.
+   */
+  .bp5-breadcrumbs {
+    height: auto;
+    min-height: 30px;
+  }
 `;
 
 const BreadcrumbLink = styled(Link)`