[ui] Repair asset header breadcrumbs for long key strings (#23384)

## Summary & Motivation

Force the `Breadcrumbs` items in the asset view header to render with
`MiddleTruncate` to ensure that long keys in the path still show up.
Otherwise, we can end up using the entire width with a single key and
every breadcrumb gets pushed into the overflow menu.

Also tweaked the overflow menu to match popover behavior from our other
components.

<img width="464" alt="Screenshot 2024-08-02 at 12 55 00"
src="https://github.com/user-attachments/assets/8b6d017d-2d45-4dcf-a344-a89b4b2dd3d1">


## How I Tested These Changes

View assets with very long key elements in their paths, verify that
middle truncate behaves correctly. It's not perfect because the
middle-truncated strings have a little excess horizontal space in some
cases, but it's an improvement.

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

@@ -6,6 +6,7 @@ import {
   Heading,
   Icon,
   IconWrapper,
+  MiddleTruncate,
   PageHeader,
   Tooltip,
 } from '@dagster-io/ui-components';
@@ -78,14 +79,24 @@ export const AssetPageHeader = ({
           <Title>
             <BreadcrumbsWithSlashes
               items={breadcrumbs}
-              currentBreadcrumbRenderer={({text}) => <Heading>{text}</Heading>}
+              currentBreadcrumbRenderer={({text}) => (
+                <TruncatedHeading>
+                  {typeof text === 'string' ? <MiddleTruncate text={text} /> : text}
+                </TruncatedHeading>
+              )}
               breadcrumbRenderer={({text, href}) => (
-                <Heading>
-                  <BreadcrumbLink to={href || '#'}>{text}</BreadcrumbLink>
-                </Heading>
+                <TruncatedHeading>
+                  <BreadcrumbLink to={href || '#'}>
+                    {typeof text === 'string' ? <MiddleTruncate text={text} /> : text}
+                  </BreadcrumbLink>
+                </TruncatedHeading>
               )}
               $numHeaderBreadcrumbs={headerBreadcrumbs.length}
-              popoverProps={{popoverClassName: 'dagster-popover'}}
+              popoverProps={{
+                minimal: true,
+                modifiers: {offset: {enabled: true, options: {offset: [0, 8]}}},
+                popoverClassName: 'dagster-popover',
+              }}
             />
             {copyableString ? (
               <Tooltip placement="bottom" content="Copy asset key">
@@ -105,6 +116,11 @@ export const AssetPageHeader = ({
   );
 };
 
+const TruncatedHeading = styled(Heading)`
+  max-width: 300px;
+  overflow: hidden;
+`;
+
 const CopyButton = styled.button`
   border: none;
   background: transparent;