Skip to content

chore(code): make Combobox search and footer sticky#1917

Merged
VojtechBartos merged 1 commit into
mainfrom
posthog-code/sticky-combobox-footer
Apr 28, 2026
Merged

chore(code): make Combobox search and footer sticky#1917
VojtechBartos merged 1 commit into
mainfrom
posthog-code/sticky-combobox-footer

Conversation

@VojtechBartos
Copy link
Copy Markdown
Member

@VojtechBartos VojtechBartos commented Apr 28, 2026

Summary

  • Pin .combobox-input-wrapper with position: sticky; top: 0 and .combobox-footer with position: sticky; bottom: 0.
  • Add an explicit max-height: 240px to [cmdk-list] so cmdk's own height tracking can't push the footer outside the popover.
  • Fixes the Command Center TaskSelector where "+ New task" required scrolling past the task list when a project had many tasks.

The custom Combobox (built on cmdk) is currently only used by TaskSelector. Other pickers (BranchSelector, GitHubRepoPicker) use @posthog/quill's Combobox, which already has a sticky footer slot — they are unaffected.

Showcase

code-task-sticky.mov

Created with PostHog Code

Pin the search input and footer with position: sticky and cap the cmdk
list with an explicit max-height so cmdk's own height transitions can't
push the footer outside the popover. Fixes the TaskSelector in the
Command Center where "+ New task" required scrolling past the task list.

Generated-By: PostHog Code
Task-Id: 95a2db7e-a9c0-4453-9fb0-5dcc6d2a80dd
@VojtechBartos VojtechBartos self-assigned this Apr 28, 2026
@VojtechBartos VojtechBartos requested a review from a team April 28, 2026 17:03
@VojtechBartos VojtechBartos marked this pull request as ready for review April 28, 2026 17:03
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Apr 28, 2026

Prompt To Fix All With AI
This is a comment left during a code review.
Path: apps/code/src/renderer/components/ui/combobox/Combobox.css
Line: 292-295

Comment:
**`position: sticky` may not activate in the current scroll model**

`[cmdk-root]` has `overflow: hidden`, which makes it a scroll container per spec — but it never actually scrolls (content is now capped to fit within its 340px `max-height`). `position: sticky` on `.combobox-footer` (and `.combobox-input-wrapper`) is relative to that non-scrolling container, so the declarations are effectively inert. The footer stays visible because `max-height: 240px` on `[cmdk-list]` keeps the total content within the 340px root cap, not because of stickiness.

This isn't a bug (the fix works), but a future maintainer may wonder why sticky seems to have no effect when inspecting layout in DevTools. A short comment would clarify intent:

```css
/* Safety net: keeps input and footer visible if [cmdk-root] ever becomes
   a true scroll container (currently the max-height on [cmdk-list] is
   the primary constraint). */
position: sticky;
bottom: 0;
```

How can I resolve this? If you propose a fix, please make it concise.

Reviews (1): Last reviewed commit: "chore(code): make Combobox search and fo..." | Re-trigger Greptile

Comment on lines 292 to +295
.combobox-footer {
position: sticky;
bottom: 0;
z-index: 1;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 position: sticky may not activate in the current scroll model

[cmdk-root] has overflow: hidden, which makes it a scroll container per spec — but it never actually scrolls (content is now capped to fit within its 340px max-height). position: sticky on .combobox-footer (and .combobox-input-wrapper) is relative to that non-scrolling container, so the declarations are effectively inert. The footer stays visible because max-height: 240px on [cmdk-list] keeps the total content within the 340px root cap, not because of stickiness.

This isn't a bug (the fix works), but a future maintainer may wonder why sticky seems to have no effect when inspecting layout in DevTools. A short comment would clarify intent:

/* Safety net: keeps input and footer visible if [cmdk-root] ever becomes
   a true scroll container (currently the max-height on [cmdk-list] is
   the primary constraint). */
position: sticky;
bottom: 0;
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/code/src/renderer/components/ui/combobox/Combobox.css
Line: 292-295

Comment:
**`position: sticky` may not activate in the current scroll model**

`[cmdk-root]` has `overflow: hidden`, which makes it a scroll container per spec — but it never actually scrolls (content is now capped to fit within its 340px `max-height`). `position: sticky` on `.combobox-footer` (and `.combobox-input-wrapper`) is relative to that non-scrolling container, so the declarations are effectively inert. The footer stays visible because `max-height: 240px` on `[cmdk-list]` keeps the total content within the 340px root cap, not because of stickiness.

This isn't a bug (the fix works), but a future maintainer may wonder why sticky seems to have no effect when inspecting layout in DevTools. A short comment would clarify intent:

```css
/* Safety net: keeps input and footer visible if [cmdk-root] ever becomes
   a true scroll container (currently the max-height on [cmdk-list] is
   the primary constraint). */
position: sticky;
bottom: 0;
```

How can I resolve this? If you propose a fix, please make it concise.

@VojtechBartos VojtechBartos merged commit c1ad2f9 into main Apr 28, 2026
14 of 15 checks passed
@VojtechBartos VojtechBartos deleted the posthog-code/sticky-combobox-footer branch April 28, 2026 18:12
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.

2 participants