Skip to content

fix: graph controls gap on compact viewports + model selector z-index#982

Draft
vorflux[bot] wants to merge 1 commit into
mainfrom
vorflux/fix-graph-gap-and-model-selector-zindex
Draft

fix: graph controls gap on compact viewports + model selector z-index#982
vorflux[bot] wants to merge 1 commit into
mainfrom
vorflux/fix-graph-gap-and-model-selector-zindex

Conversation

@vorflux
Copy link
Copy Markdown
Contributor

@vorflux vorflux Bot commented May 21, 2026

Summary

Two UI bug fixes:

1. Graph page — controls gap on compact/mobile viewports

Before: NavigationControls was absolutely positioned with bottom: 148 on compact viewports, while Legend was absolutely positioned at bottom: 16. This left ~120px of empty gap between them with no content filling it.

Fix: Both NavigationControls and Legend are now rendered inside a single flex-column container absolutely positioned at bottom: 16, left: 16. They stack flush against each other with an 8px gap — no more empty space regardless of viewport size. Also removed the now-redundant position: absolute / bottom / left / zIndex from Legend's own outerStyle since positioning is handled by the shared container.

2. Model selector dialog z-index

Before: The ChatModelSelector wrapper had no explicit z-index. The SpaceSelector button rendered after it in the DOM would paint on top of the model selector's absolute-positioned dropdown (even though the dropdown had z-50) because later DOM siblings at the same stacking level naturally paint over earlier ones.

Fix: Added z-10 to the ChatModelSelector wrapper div, establishing a stacking context that places the entire model selector (including its dropdown) above the SpaceSelector that follows it.

Version bump

  • @supermemory/memory-graph: 0.2.10.2.2

Testing

  • Graph layout fix: verified by code inspection — the flex-column approach renders controls directly above legend with a fixed 8px gap, eliminating the hardcoded bottom: 148 offset that caused the empty space
  • Model selector z-index: verified by tracing stacking context — z-10 on the wrapper creates a stacking context above SpaceSelector (z-auto) since both share the parent relative z-20! container from the chat input

Session Details

- memory-graph: stack NavigationControls and Legend in a single flex
  column at bottom-left instead of using separate absolute-positioned
  elements with a hardcoded bottom offset, eliminating the empty gap on
  compact/mobile viewports
- memory-graph: bump version 0.2.1 -> 0.2.2
- web: add z-10 to ChatModelSelector wrapper so its absolute dropdown
  renders above the SpaceSelector button that follows it in DOM order
@graphite-app graphite-app Bot requested a review from Dhravya May 21, 2026 00:32
@socket-security
Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Added@​ai-sdk/​openai@​3.0.41721008898100
Added@​ai-sdk/​google@​3.0.43761008798100
Added@​ai-sdk/​cerebras@​2.0.41991008698100
Added@​ai-sdk/​groq@​3.0.319710010098100

View full report

@socket-security
Copy link
Copy Markdown

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action Severity Alert  (click "▶" to expand/collapse)
Warn High
Obfuscated code: npm entities is 91.0% likely obfuscated

Confidence: 0.91

Location: Package overview

From: ?npm/entities@4.5.0

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/entities@4.5.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
✅ Deployment successful!
View logs
supermemory-mcp 4ddbd78 May 21 2026, 12:33 AM

@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
supermemory-app 4ddbd78 Commit Preview URL

Branch Preview URL
May 21 2026, 12:34 AM

@vorflux vorflux Bot marked this pull request as draft May 21, 2026 00:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants