From 3783bd84db9902cbf50ecf3db37abb5deadfe03a Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 15 Sep 2026 14:39:03 +0000 Subject: [PATCH 1/2] Cap the size of Petrinaut's Open submenu and elide long net titles Add a `menuClassName` to selectable-list items that carry `subItems`, applied to that item's submenu content, and use it to size the Open submenu and truncate the saved-net titles inside it. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01VkuGK4P2VXYGTXBTZbC67H --- .changeset/ds-menu-sub-item-class.md | 5 +++++ .changeset/petrinaut-open-submenu-size.md | 5 +++++ .../src/util/SelectableList/selectable-list-util.ts | 5 +++++ .../src/util/SelectableList/selectable-list.tsx | 5 ++++- .../petrinaut/src/ui/views/Editor/editor-view.tsx | 12 ++++++++++++ 5 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 .changeset/ds-menu-sub-item-class.md create mode 100644 .changeset/petrinaut-open-submenu-size.md diff --git a/.changeset/ds-menu-sub-item-class.md b/.changeset/ds-menu-sub-item-class.md new file mode 100644 index 00000000000..19be08f9bd3 --- /dev/null +++ b/.changeset/ds-menu-sub-item-class.md @@ -0,0 +1,5 @@ +--- +"@hashintel/ds-components": patch +--- + +`Menu` and `SelectableList` items that carry `subItems` accept a `menuClassName`, applied to that item's submenu content alongside the list's own styles. diff --git a/.changeset/petrinaut-open-submenu-size.md b/.changeset/petrinaut-open-submenu-size.md new file mode 100644 index 00000000000..09b98097e8f --- /dev/null +++ b/.changeset/petrinaut-open-submenu-size.md @@ -0,0 +1,5 @@ +--- +"@hashintel/petrinaut": patch +--- + +The main menu's Open submenu is capped in width and height, and a long net title is truncated with an ellipsis instead of stretching the submenu across the viewport. diff --git a/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list-util.ts b/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list-util.ts index 578e302ef3d..9eaabe0caf2 100644 --- a/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list-util.ts +++ b/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list-util.ts @@ -39,6 +39,11 @@ type StandardItem = ItemBase & } | { subItems: Array>; + /** + * Applied to this item's submenu content, composed with the list's + * own class, for styling that only that submenu should carry. + */ + menuClassName?: string; } >; diff --git a/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list.tsx b/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list.tsx index 42ab78aaf41..a302c79bedb 100644 --- a/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list.tsx +++ b/libs/@hashintel/ds-components/src/util/SelectableList/selectable-list.tsx @@ -46,6 +46,7 @@ const NestedMenu = ({ subItems, body, className, + menuClassName, isSelected, ctx, }: { @@ -53,6 +54,7 @@ const NestedMenu = ({ subItems: Array>; body: React.ReactNode; className: string | undefined; + menuClassName: string | undefined; isSelected: boolean; ctx: RenderCtx; }) => { @@ -90,7 +92,7 @@ const NestedMenu = ({ onKeyDownCapture={(event) => handleLoopKeyDown(event, menu)} > 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} /> diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx index 5552eb3a813..ec2992edf28 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx +++ b/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, From 87ea955a72d6e8d8f7448fb89992738e364f62d2 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 15 Sep 2026 14:44:28 +0000 Subject: [PATCH 2/2] Drop the Petrinaut changeset and reword the ds-components one Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01VkuGK4P2VXYGTXBTZbC67H --- .changeset/ds-menu-sub-item-class.md | 2 +- .changeset/petrinaut-open-submenu-size.md | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) delete mode 100644 .changeset/petrinaut-open-submenu-size.md diff --git a/.changeset/ds-menu-sub-item-class.md b/.changeset/ds-menu-sub-item-class.md index 19be08f9bd3..cdd919d392e 100644 --- a/.changeset/ds-menu-sub-item-class.md +++ b/.changeset/ds-menu-sub-item-class.md @@ -2,4 +2,4 @@ "@hashintel/ds-components": patch --- -`Menu` and `SelectableList` items that carry `subItems` accept a `menuClassName`, applied to that item's submenu content alongside the list's own styles. +Allow `Menu` and `SelectableList` items that carry `subItems` to accept a `menuClassName` diff --git a/.changeset/petrinaut-open-submenu-size.md b/.changeset/petrinaut-open-submenu-size.md deleted file mode 100644 index 09b98097e8f..00000000000 --- a/.changeset/petrinaut-open-submenu-size.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@hashintel/petrinaut": patch ---- - -The main menu's Open submenu is capped in width and height, and a long net title is truncated with an ellipsis instead of stretching the submenu across the viewport.