mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix mobile popover issues in InlineEntitySelector

Browse source 
Force popover to always open downward (side="bottom") to prevent it from
flipping upward and going off-screen on mobile. Skip auto-focusing the
search input on touch devices so the virtual keyboard doesn't open and
reshape the viewport. Add touch-manipulation on option buttons to remove
tap delays and improve scroll gesture recognition.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta 2026-03-05 17:23:01 -06:00
parent e401979851
commit 5134cac993
1 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/src/components/InlineEntitySelector.tsx
View file

@ -106,11 +106,18 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
</PopoverTrigger>
<PopoverContent
align="start"
side="bottom"
collisionPadding={16}
className="w-[min(20rem,calc(100vw-2rem))] p-1"
onOpenAutoFocus={(event) => {
event.preventDefault();
inputRef.current?.focus();
// On touch devices, don't auto-focus the search input to avoid
// opening the virtual keyboard which reshapes the viewport and
// pushes the popover off-screen.
const isTouch = window.matchMedia("(pointer: coarse)").matches;
if (!isTouch) {
inputRef.current?.focus();
}
}}
onCloseAutoFocus={(event) => {
if (!shouldPreventCloseAutoFocusRef.current) return;
@ -170,7 +177,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
key={option.id || "__none__"}
type="button"
className={cn(
"flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm",
"flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm touch-manipulation",
isHighlighted && "bg-accent",
)}
onMouseEnter={() => setHighlightedIndex(index)}