FE-472: fix type header appearance

apps/hash-frontend/eslint.config.js

@@ -101,7 +101,14 @@ export default [
       },
     },
     {
-      ignores: ["buildstamp.js", "next.config.js", "next-env.d.ts"],
+      ignores: [
+        "buildstamp.js",
+        "next.config.js",
+        "next-env.d.ts",
+        // Outside the tsconfig project: imports `@hashintel/ds-components/preset`,
+        // an `exports` subpath the legacy `moduleResolution: "node"` cannot resolve
+        "panda.config.ts",
+      ],
     },
   ]),
 ];

apps/hash-frontend/package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "build": "next build",
     "build:docker": "docker buildx build --tag hash-frontend --file docker/Dockerfile ../../ --load --build-arg FRONTEND_URL=\"$FRONTEND_URL\" --build-arg API_ORIGIN=\"$API_ORIGIN\"",
-    "codegen": "rimraf './src/**/*.gen.*'; graphql-codegen --config codegen.config.ts",
+    "codegen": "rimraf './src/**/*.gen.*'; graphql-codegen --config codegen.config.ts && panda cssgen --outfile ./src/pages/ds-components-styles.gen.css",
     "dev": "next dev",
     "fix:eslint": "eslint --fix .",
     "lint:eslint": "eslint --report-unused-disable-directives .",
@@ -143,6 +143,7 @@
     "@local/eslint": "workspace:*",
     "@local/tsconfig": "workspace:*",
     "@next/bundle-analyzer": "15.5.9",
+    "@pandacss/dev": "1.11.1",
     "@types/dotenv-flow": "3.3.3",
     "@types/gapi": "0.0.47",
     "@types/google.accounts": "0.0.18",

apps/hash-frontend/panda.config.ts

@@ -0,0 +1,37 @@
+import { createRequire } from "node:module";
+
+import { defineConfig } from "@pandacss/dev";
+
+import { scopedThemeConfig } from "@hashintel/ds-components/preset";
+
+/** Panda evaluates this config through CJS, so `__filename` is available here. */
+const require = createRequire(__filename);
+
+/**
+ * Generates the stylesheet backing `@hashintel/ds-components` usage in this
+ * app: `panda cssgen` (part of the `codegen` script) writes
+ * `src/pages/ds-components-styles.gen.css`, which is imported in
+ * `_app.page.tsx`.
+ *
+ * Atomic utility classes are global, while the design system's preflight,
+ * token variables and global styles are scoped to `.hash-ds-root` so they
+ * cannot interfere with the MUI-styled rest of the app. Wrap any subtree that
+ * uses themed ds-components in an element with that class.
+ */
+export default defineConfig({
+  ...scopedThemeConfig(".hash-ds-root"),
+
+  /**
+   * Only styles used inside ds-components itself — this app does not author
+   * Panda styles. Add `./src` globs here if `css()` calls are introduced.
+   */
+  include: [require.resolve("@hashintel/ds-components/panda.buildinfo.json")],
+
+  exclude: [],
+
+  // Polyfill CSS @layer, as this app's unlayered global resets would
+  // otherwise override layered utilities.
+  polyfill: true,
+
+  importMap: "@hashintel/ds-helpers",
+});

apps/hash-frontend/src/pages/_app.page.tsx

@@ -7,6 +7,7 @@ require("setimmediate");
 
 import "./globals.scss";
 import "./prism.css";
+import "./ds-components-styles.gen.css";
 import { ApolloProvider } from "@apollo/client/react";
 import { CacheProvider } from "@emotion/react";
 import { CssBaseline, GlobalStyles, ThemeProvider } from "@mui/material";

apps/hash-frontend/src/pages/shared/entity-type-page/shared/entity-type-header.tsx

@@ -14,6 +14,7 @@ import {
   EntityTypeIcon,
   LinkTypeIcon,
 } from "@hashintel/design-system";
+import { TextMark } from "@hashintel/ds-components";
 import { useEntityTypeFormContext } from "@hashintel/type-editor";
 
 import { EditEmojiIconButton } from "../../../../shared/edit-emoji-icon-button";
@@ -106,8 +107,14 @@ export const EntityTypeHeader = ({
           alignItems="center"
           justifyContent="space-between"
         >
-          <Stack direction="row" alignItems="center" gap={5}>
-            <Stack direction="row" alignItems="flex-start" mt={1} mb={3}>
+          <Stack direction="row" alignItems="center" gap={5} minWidth={0}>
+            <Stack
+              direction="row"
+              alignItems="flex-start"
+              mt={1}
+              mb={3}
+              minWidth={0}
+            >
               {entityTypeNameSize !== null && (
                 <Controller
                   control={control}
@@ -165,7 +172,7 @@ export const EntityTypeHeader = ({
                   }}
                 />
               )}
-              <Box sx={{ position: "relative", ml: 2.5 }}>
+              <Box sx={{ ml: 2.5, minWidth: 0 }}>
                 <Tooltip
                   placement="top-start"
                   componentsProps={{
@@ -195,39 +202,37 @@ export const EntityTypeHeader = ({
                     variant="h1"
                     fontWeight="bold"
                     ref={entityTypeNameTextRef}
-                    sx={{
-                      lineHeight: 1.2,
-                    }}
+                    sx={{ overflow: "hidden", textOverflow: "ellipsis" }}
                   >
                     {entityTypeSchema.title}
+                    {isInSlide && (
+                      <TextMark>
+                        <Link
+                          href={
+                            generateLinkParameters(entityTypeSchema.$id).href
+                          }
+                          sx={{ ml: 2.5 }}
+                          target="_blank"
+                        >
+                          <ArrowUpRightFromSquareRegularIcon
+                            sx={{
+                              fill: ({ palette }) => palette.blue[50],
+                              fontSize: 24,
+                              verticalAlign: "middle",
+                              // Nudge the icon up slightly relative to the
+                              // text, without affecting line-box layout
+                              position: "relative",
+                              top: -8,
+                              "&:hover": {
+                                fill: ({ palette }) => palette.blue[60],
+                              },
+                            }}
+                          />
+                        </Link>
+                      </TextMark>
+                    )}
                   </Typography>
                 </Tooltip>
-                {isInSlide && entityTypeNameSize !== null && (
-                  <Link
-                    href={generateLinkParameters(entityTypeSchema.$id).href}
-                    sx={{
-                      position: "absolute",
-                      left: entityTypeNameSize.lastLineWidth + 20,
-                      /**
-                       * The vertical center of the text plus offset half the icon size
-                       */
-                      top:
-                        entityTypeNameSize.lastLineTop +
-                        (entityTypeNameSize.lineHeight / 2 - 12),
-                    }}
-                    target="_blank"
-                  >
-                    <ArrowUpRightFromSquareRegularIcon
-                      sx={{
-                        fill: ({ palette }) => palette.blue[50],
-                        fontSize: 24,
-                        "&:hover": {
-                          fill: ({ palette }) => palette.blue[70],
-                        },
-                      }}
-                    />
-                  </Link>
-                )}
               </Box>
             </Stack>
             <Stack

apps/hash-frontend/src/pages/shared/entity-type.tsx

@@ -49,7 +49,8 @@ import {
   typeHeaderContainerStyles,
 } from "./shared/type-editor-styling";
 import { useSlideStack } from "./slide-stack";
-import { TopContextBar } from "./top-context-bar";
+import { backForwardHeight } from "./slide-stack/slide-back-forward-close-bar";
+import { TOP_CONTEXT_BAR_HEIGHT, TopContextBar } from "./top-context-bar";
 
 import type {
   BaseUrl,
@@ -480,7 +481,25 @@ export const EntityType = ({
                 void refetch();
               }}
               scrollToTop={() => {}}
-              sx={{ bgcolor: "white" }}
+              sx={[
+                { bgcolor: "white" },
+                /**
+                 * In a slide, the slide stack renders absolutely-positioned
+                 * back/forward/close buttons over the top-right corner – push
+                 * the bar's content down so the breadcrumbs and actions menu
+                 * sit below those buttons rather than behind them, and align
+                 * the breadcrumbs with the slide's 32px content padding
+                 * instead of the sidebar-state based padding used on regular
+                 * pages.
+                 */
+                isInSlide
+                  ? {
+                      pt: `${backForwardHeight}px`,
+                      pl: 4,
+                      pr: 3,
+                    }
+                  : {},
+              ]}
             />
 
             {!isReadonly && (

apps/hash-frontend/tsconfig.json

@@ -24,5 +24,5 @@
     "theme-override.d.ts",
     ".next/types/**/*.ts"
   ],
-  "exclude": ["node_modules", ".next"]
+  "exclude": ["node_modules", ".next", "panda.config.ts"]
 }

libs/@hashintel/ds-components/src/main.ts

@@ -33,6 +33,7 @@ export {
 export { Slider, type SliderProps } from "./components/Slider/slider";
 export { Switch, type SwitchProps } from "./components/Switch/switch";
 export { TextInput } from "./components/TextInput/text-input";
+export { TextMark } from "./components/TextMark/text-mark";
 export { Tooltip } from "./components/Tooltip/tooltip";
 export {
   PortalContainerContext,

yarn.lock

@@ -614,6 +614,7 @@ __metadata:
     "@next/bundle-analyzer": "npm:15.5.9"
     "@ory/client": "npm:1.22.7"
     "@ory/integrations": "npm:1.3.1"
+    "@pandacss/dev": "npm:1.11.1"
     "@popperjs/core": "npm:2.11.8"
     "@react-sigma/core": "npm:4.0.3"
     "@sentry/nextjs": "npm:10.54.0"