ENG-2328 Fix relation type menu styling on the Obsidian canvas

[trangdoan982]

https://entire.io/gh/DiscourseGraphs/discourse-graph/trails/42

Reviewer brief

• Base: stacked on ENG-2256 Implement new relation menu empty state #1491 (ENG-2256). Merge that first.
• Result: the relation type menu on an Obsidian canvas now draws above tldraw's style panel, and it's centred on the new arrow's midpoint.
• Review focus: z-[301] in apps/obsidian/src/components/canvas/overlays/RelationTypeDropdown.tsx.
  • It must beat tldraw's .tlui-layout (z 300), which comes later in the DOM, so a tie loses.
  • It must stay under tldraw's menus (400) and toasts (650).
  • It's a literal, not calc(var(--layer-panels) + 1). If that variable isn't defined where the menu renders, the z-index becomes invalid and the bug comes back without any error.
• Risk: a tldraw upgrade that changes its layer scale would need this value updated. The inline comment names both bounds.

The diagram compares the failing path before and after the change:

flowchart LR
  subgraph Before
    A1["Drag Evidence to Claim"] --> B1["Menu root: z-30<br/>-translate-x/y-1/2 (inert, no preflight)"]
    B1 --> C1["Style panel (z 300) covers + and flyout"]
    B1 --> D1["Menu top-left sits at arrow midpoint"]
  end
  subgraph After
    A2["Drag Evidence to Claim"] --> B2["Menu root: z-[301]<br/>[transform:translate(-50%,-50%)]"]
    B2 --> C2["Menu above style panel, below tldraw menus (400)"]
    B2 --> D2["Menu centred on arrow midpoint"]
  end

Loading

Verification

These scenarios ran in the live Obsidian app over CDP, on the dgDevVault fixture canvas with real mouse and key input. In scenario 1, putting the old z-30 back in place brings the bug back, which shows the check catches it.

Scenario	Input	Expected	Actual	Pass
Plus button above style panel near right edge	Evidence to Claim with the + under the style panel; hit-test + centre, then repeat with z-index 30 as a control	elementFromPoint at + centre is the + button; menu z-index 301	+onTop=true z=301 menu=746,322,906,450 stylePanel=856,96,1004,502 overlap=true control(z30)+onTop=false	yes
Plus click opens flyout fully visible	Evidence to Claim with the flyout over the style panel; real click on +	flyout open, inside the canvas, every flyout button is topmost at its centre	expanded=true stylePanel=856,96,1004,502 flyout=871,322,999,390 inCanvas=true buttonsOnTop=true,true	yes
Menu centred on arrow midpoint	Evidence to Claim; compare menu rect centre with its anchor (arrow midpoint in viewport)	centre within 1px of anchor; anchor near the arrow's bounds centre	dx=0 dy=0 anchorToBoundsCentre=0px transform=matrix(1, 0, 0, 1, -80, -64)	yes
Click outside dismisses menu and deletes arrow	Evidence to Claim; click empty canvas	menu gone, pending arrow deleted	before menu=true arrows=1; after menu=false arrows=0	yes
Escape dismisses menu and deletes arrow	Evidence to Claim; press Escape	menu gone, pending arrow deleted	before menu=true arrows=1; after menu=false arrows=0	yes
Style panel, toolbar and main menu work with menu closed	no relation menu; select Claim; hit-test style panel; click toolbar draw tool; open tldraw main menu	style panel topmost; tool switches to draw; main menu opens and is topmost	stylePanelOnTop=true toolbarDraw=true->draw mainMenu=true open=true onTop=true	yes

Scenario	Screenshot
Plus button above style panel near right edge
Plus click opens flyout fully visible
Menu centred on arrow midpoint
Style panel, toolbar and main menu work with menu closed

• pnpm ci:validate passed, with 0 cached tasks.
• No tests added. The change is two CSS classes, so the CDP scenarios above are the check.
• Not verified: mobile layout, where tldraw hides the style panel so the menu doesn't overlap it; tldraw's dark theme; canvases in a narrow pane.

Loom video

pending

Scope check

• Ran $scope-check against the ENG ticket and final diff.
• Scope beyond Done When: None

Standards check

• Ran $dg-pr-adherence-check against the final diff and PR metadata.

No outstanding findings. It raised a possible inert shadow-lg on the menu, but the running app shows it renders (rgba(0,0,0,0.1) 0px 10px 15px -3px …).

Local delegated full review

• Ran a comprehensive review of the entire final diff in a subagent with a fresh context. Use $dg-delegated-full-review when no other full-review workflow is available.

No defects. One optional suggestion was to use calc(var(--layer-panels) + 1). I kept the literal for the reason given under Review focus.

🤖 Generated with Claude Code

---

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
discourse-graph	Skipped		Sep 29, 2026 5:08pm UTC

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[linear-code]

ENG-2328

[devin-ai-integration]

Devin Review found 1 potential issue.

[trangdoan982]

Closing: these relation menu styling fixes are folded into #1491 (ENG-2256) as d2736d2, since they correct that feature. ENG-2328 is marked as a duplicate of ENG-2256.