FE-1723: Cap the size of Petrinaut's Open submenu and elide long net titles

.changeset/ds-menu-sub-item-class.md

@@ -0,0 +1,5 @@
+---
+"@hashintel/ds-components": patch
+---
+
+Allow `Menu` and `SelectableList` items that carry `subItems` to accept a `menuClassName`

libs/@hashintel/ds-components/src/util/SelectableList/selectable-list-util.ts

@@ -39,6 +39,11 @@ type StandardItem = ItemBase &
       }
     | {
         subItems: Array<ItemOrGroup<Item>>;
+        /**
+         * Applied to this item's submenu content, composed with the list's
+         * own class, for styling that only that submenu should carry.
+         */
+        menuClassName?: string;
       }
   >;
 

libs/@hashintel/ds-components/src/util/SelectableList/selectable-list.tsx

@@ -46,13 +46,15 @@ const NestedMenu = ({
   subItems,
   body,
   className,
+  menuClassName,
   isSelected,
   ctx,
 }: {
   item: Item;
   subItems: Array<ItemOrGroup<Item>>;
   body: React.ReactNode;
   className: string | undefined;
+  menuClassName: string | undefined;
   isSelected: boolean;
   ctx: RenderCtx;
 }) => {
@@ -90,7 +92,7 @@ const NestedMenu = ({
                 onKeyDownCapture={(event) => handleLoopKeyDown(event, menu)}
               >
                 <Menu.Content
-                  className={ctx.contentClassName}
+                  className={cx(ctx.contentClassName, menuClassName)}
                   onKeyDownCapture={(event) =>
                     handleCustomRowKeyDown(event, menu)
                   }
@@ -196,6 +198,7 @@ const ItemRow = ({ item, ctx }: { item: Item; ctx: RenderCtx }) => {
         subItems={item.subItems}
         body={body}
         className={classes.item}
+        menuClassName={item.menuClassName}
         isSelected={isSelected}
         ctx={ctx}
       />

libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx

@@ -112,6 +112,17 @@ const canvasContainerStyle = css({
   flexGrow: 1,
 });
 
+// `white-space` inherits down to the item text, whose `overflow: hidden;
+// text-overflow: ellipsis` only elides on a non-wrapping line. `&&` outranks
+// the menu's own max-height class, which ties on specificity.
+const openSubmenuStyle = css({
+  whiteSpace: "nowrap",
+  "&&": {
+    maxWidth: "[min(600px, 70vw)]",
+    maxHeight: "[min(800px, 80vh, var(--available-height, 100vh))]",
+  },
+});
+
 const isEmptySDCPN = (sdcpn: SDCPN) =>
   sdcpn.places.length === 0 &&
   sdcpn.transitions.length === 0 &&
@@ -323,6 +334,7 @@ export const EditorView = ({
           {
             id: "open",
             text: "Open",
+            menuClassName: openSubmenuStyle,
             subItems: existingNets.map((net) => ({
               id: `open-${net.netId}`,
               text: net.title,