diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx b/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx index bf0a53899..c4720aa77 100644 --- a/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx +++ b/apps/ai-game-creator-shell/src/features/project-workspace/ResourceReferenceInput.tsx @@ -493,6 +493,7 @@ function ResourceReferenceEditor({ handleSelectMention(option, textNode, closeMenu) } menuRenderFn={renderMentionMenu} + anchorClassName="resource-reference-menu-anchor" preselectFirstItem /> {pickerOpen && pickerPosition diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index 40b9bc2b5..bb08ea406 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -4540,22 +4540,30 @@ h2 { .resource-reference-menu { display: grid; gap: 2px; - min-width: 240px; - max-height: 260px; + width: min(360px, calc(100vw - 48px)); + max-height: min(240px, calc(100vh - 140px)); overflow: auto; + overscroll-behavior: contain; padding: 6px; border: 1px solid var(--platform-subpanel-border, #dbe3ef); border-radius: 12px; background: var(--platform-panel-fill, #fff); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16); + scrollbar-color: #cbd5e1 transparent; + scrollbar-width: thin; +} + +.resource-reference-menu-anchor { + z-index: 90; } .resource-reference-menu button { - display: flex; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; align-items: center; - justify-content: space-between; gap: 12px; width: 100%; + min-width: 0; padding: 8px 10px; border: 0; border-radius: 8px; @@ -4570,8 +4578,20 @@ h2 { background: var(--platform-subpanel-fill, #f1f5f9); } +.resource-reference-menu button > span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .resource-reference-menu small { + max-width: 132px; + overflow: hidden; color: var(--platform-muted-text, #64748b); + font-size: 11px; + text-overflow: ellipsis; + white-space: nowrap; } .resource-reference-picker {