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/entity-type-plural.tsx

@@ -7,14 +7,10 @@ import { AltTitleGroup } from "./shared/alt-title-group";
 import type { EntityTypeEditorFormData } from "@hashintel/type-editor";
 
 interface EntityTypePluralProps {
-  isLinkType: boolean;
   readonly?: boolean;
 }
 
-export const EntityTypePlural = ({
-  isLinkType,
-  readonly,
-}: EntityTypePluralProps) => {
+export const EntityTypePlural = ({ readonly }: EntityTypePluralProps) => {
   const { control } = useFormContext<EntityTypeEditorFormData>();
 
   const pluralController = useController({
@@ -29,7 +25,7 @@ export const EntityTypePlural = ({
   }
 
   return (
-    <AltTitleGroup direction={isLinkType ? "column" : "row"} label="plural">
+    <AltTitleGroup direction="column" label="plural">
       <EditableField
         {...props}
         inputRef={ref}

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";
@@ -105,9 +106,10 @@ export const EntityTypeHeader = ({
           direction="row"
           alignItems="center"
           justifyContent="space-between"
+          mb={3}
         >
-          <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} minWidth={0}>
               {entityTypeNameSize !== null && (
                 <Controller
                   control={control}
@@ -158,14 +160,14 @@ export const EntityTypeHeader = ({
                         }
                         sx={{
                           position: "relative",
-                          top: entityTypeNameSize.lineHeight / 2 - 22,
+                          top: entityTypeNameSize.lineHeight / 2 - 25,
                         }}
                       />
                     );
                   }}
                 />
               )}
-              <Box sx={{ position: "relative", ml: 2.5 }}>
+              <Box sx={{ ml: 2.5, minWidth: 0 }}>
                 <Tooltip
                   placement="top-start"
                   componentsProps={{
@@ -195,39 +197,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
@@ -236,7 +236,7 @@ export const EntityTypeHeader = ({
               gap={1.5}
               sx={{ position: "relative", top: 5 }}
             >
-              <EntityTypePlural isLinkType={isLink} readonly={isReadonly} />
+              <EntityTypePlural readonly={isReadonly} />
               {isLink && <EntityTypeInverse readonly={isReadonly} />}
             </Stack>
           </Stack>
@@ -245,6 +245,8 @@ export const EntityTypeHeader = ({
               onClick={() => setShowExtendTypeModal(true)}
               variant="secondary"
               size="small"
+              // Don't let the button get squeezed by long header content
+              sx={{ flexShrink: 0, ml: 2 }}
             >
               Extend <ArrowUpRightIcon sx={{ fontSize: 16, ml: 1.5 }} />
             </Button>

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

@@ -426,29 +426,33 @@ export const EntityType = ({
             })}
           >
             <TopContextBar
-              actionMenuItems={[
-                ...(!isReadonly && remoteEntityType && !isArchived
-                  ? [
-                      <ArchiveMenuItem
-                        key={entityType.schema.$id}
-                        item={remoteEntityType}
-                        onItemChange={() => {
-                          onEntityTypeUpdated?.(entityType);
-                        }}
-                      />,
+              actionMenuItems={
+                isInSlide
+                  ? []
+                  : [
+                      ...(!isReadonly && remoteEntityType && !isArchived
+                        ? [
+                            <ArchiveMenuItem
+                              key={entityType.schema.$id}
+                              item={remoteEntityType}
+                              onItemChange={() => {
+                                onEntityTypeUpdated?.(entityType);
+                              }}
+                            />,
+                          ]
+                        : []),
+                      ...(!isReadonly && !isDraft && !isLink
+                        ? [
+                            <ConvertTypeMenuItem
+                              key={entityType.schema.$id}
+                              convertToLinkType={convertToLinkType}
+                              disabled={isDirty}
+                              typeTitle={entityType.schema.title}
+                            />,
+                          ]
+                        : []),
                     ]
-                  : []),
-                ...(!isReadonly && !isDraft && !isLink
-                  ? [
-                      <ConvertTypeMenuItem
-                        key={entityType.schema.$id}
-                        convertToLinkType={convertToLinkType}
-                        disabled={isDirty}
-                        typeTitle={entityType.schema.title}
-                      />,
-                    ]
-                  : []),
-              ]}
+              }
               defaultCrumbIcon={null}
               item={remoteEntityType ?? undefined}
               crumbs={[
@@ -458,7 +462,7 @@ export const EntityType = ({
                   id: "types",
                 },
                 {
-                  href: "/types/entity-type",
+                  href: `/types/${isLink ? "link" : "entity"}-type`,
                   title: `${isLink ? "Link" : "Entity"} Types`,
                   id: "entity-types",
                 },
@@ -480,7 +484,19 @@ 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 ? { mt: -0.6 } : {},
+              ]}
             />
 
             {!isReadonly && (

apps/hash-frontend/src/pages/shared/slide-stack/slide-back-forward-close-bar.tsx

@@ -29,7 +29,6 @@ export const SlideBackForwardCloseBar = ({
         pointerEvents: "auto",
         pt: 1.5,
         pr: 3,
-        zIndex: 2,
       }}
     >
       <Box display="flex" justifyContent="space-between" gap={1}>

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/design-system/src/theme/typography.ts

@@ -19,7 +19,7 @@ export const typography: ThemeOptions["typography"] = {
   h1: {
     fontFamily: headingFonts,
     fontSize: "var(--step-5)",
-    lineHeight: 1.1,
+    lineHeight: 1.2,
     fontWeight: 500,
   },
   h2: {

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"