chore(code): make Combobox search and footer sticky#1917
Conversation
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
Prompt To Fix All With AIThis 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 |
| .combobox-footer { | ||
| position: sticky; | ||
| bottom: 0; | ||
| z-index: 1; |
There was a problem hiding this 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:
/* 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.
Summary
.combobox-input-wrapperwithposition: sticky; top: 0and.combobox-footerwithposition: sticky; bottom: 0.max-height: 240pxto[cmdk-list]so cmdk's own height tracking can't push the footer outside the popover.TaskSelectorwhere "+ New task" required scrolling past the task list when a project had many tasks.The custom
Combobox(built oncmdk) is currently only used byTaskSelector. 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