@flamingo-stack/openframe-frontend-core 0.0.534 → 0.0.535-1763.4621.1

package/src/components/chat/chat-input.tsx

@@ -168,6 +168,13 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
   } = rest as typeof rest & { rows?: number }
 
   const [value, setValue] = useState('')
+  // Whether the editor currently holds at least one committed mention chip —
+  // it alone needs the tall line box (see the editor's className). Read from the
+  // DOM, NOT by testing the draft against `MENTION_GLOBAL`: that regex also
+  // matches ordinary typed text (`meet @3:00`, `@prod:us-east`), which would
+  // switch the editor to a 36px line box with no chip on screen. Chips are only
+  // ever created by `rebuildDom`, so the two writers below cover every path.
+  const [hasChips, setHasChips] = useState(false)
   const [focused, setFocused] = useState(false)
   const [isStopping, setIsStopping] = useState(false)
   // The ghost preview is dismissed as soon as the user edits the draft (typing
@@ -224,7 +231,12 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
         if (typeof caret === 'number') placeCaretAtOffset(el, caret)
         else placeCaretAtEnd(el)
       }
+      setHasChips(el.querySelector('[data-token]') !== null)
     }
+    // Advance the mirror HERE, not only on the next render: `fire` clears the
+    // draft and then reads it back within the same tick to decide whether a
+    // refused send may restore it.
+    valueRef.current = next
     setValue(next)
   }, [])
 
@@ -233,19 +245,31 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
     (message: string) => {
       const can = (message.length > 0 || allowEmptySend) && !sending && !disabled
       if (!can || !onSend) return
-      const result = onSend(message)
-      const done = () => {
-        metaRef.current = new Map()
-        applyValue('')
-        shouldRefocusRef.current = true
-        focusEditor()
+      // Clear FIRST and put it back only if the host refuses, rather than
+      // clearing once the send settles. The editor stays typable while `sending`
+      // (see `contentEditable` below), and a host whose `onSend` is async —
+      // `TicketReplyComposer` awaits a round trip — leaves a window in which the
+      // user starts their next message; a deferred clear would silently delete
+      // it. Restoring is guarded on the box still being empty for the same
+      // reason. `applyValue` advances `valueRef` synchronously, so the guard
+      // reads the cleared draft even when `onSend` refuses in the same tick.
+      const sentMeta = metaRef.current
+      metaRef.current = new Map()
+      applyValue('')
+      shouldRefocusRef.current = true
+      focusEditor()
+      const restore = () => {
+        if (valueRef.current.length > 0) return
+        metaRef.current = sentMeta
+        applyValue(message)
       }
+      const result = onSend(message)
       if (result instanceof Promise) {
         void result.then((ok) => {
-          if (ok !== false) done()
+          if (ok === false) restore()
         })
-      } else if (result !== false) {
-        done()
+      } else if (result === false) {
+        restore()
       }
     },
     [allowEmptySend, sending, disabled, onSend, focusEditor, applyValue],
@@ -351,6 +375,9 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
   const syncFromDom = useCallback(() => {
     const el = editorRef.current
     if (!el) return
+    // Typing can DELETE a chip (they are atomic `contentEditable=false` nodes),
+    // so the flag has to be re-read here too, not just where chips are built.
+    setHasChips(el.querySelector('[data-token]') !== null)
     setValue(serialize(el))
   }, [])
 
@@ -452,14 +479,13 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
   const hasContent = value.trim().length > 0 || allowEmptySend
   const sendDisabled = sending || disabled || !hasContent
   const isEmpty = value.length === 0
-  const isDisabled = sending || disabled
   // Non-destructive ghost preview (e.g. a hovered quick-action's full prompt).
   // Shown whenever a `previewText` is set (even over an existing draft): the
   // editor's real value is NEVER touched — it's just visually hidden behind the
   // ghost while previewing, and reappears verbatim once `previewText` clears.
   // Declarative, no `setValue` / draft save-restore. Suppressed the moment the
   // user edits the draft (`previewDismissed`) so typing is never hidden.
-  const showPreview = !isDisabled && !!previewText && !previewDismissed
+  const showPreview = !sending && !disabled && !!previewText && !previewDismissed
 
   return (
     <div
@@ -493,24 +519,28 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
             }}
             className={cn(
               // `items-center` keeps the empty single-line text AND a mention chip
-              // vertically centered the same way. `py-1.5` (6px) pairs with the
-              // editor's `leading-9` (36px) → a single line is exactly 48px
-              // (36 + 2*6). The 36px line box is just barely above the 32px chip
-              // (incl. its ~3.5px vertical-align overhead), so there's almost no
-              // slack for the chip to drift in → it reads as centered, and the row
-              // never overflows past 48px.
+              // vertically centered the same way. With a chip in the box, `py-1.5`
+              // (6px) pairs with the editor's `leading-9` (36px) → that row is
+              // 36 + 2*6 = 48px. The 36px line box is just barely above the 32px
+              // chip (incl. its ~3.5px vertical-align overhead), so there's almost
+              // no slack for the chip to drift in → it reads as centered.
+              // A chipless row is shorter than its content box and the `min-h-*`
+              // here is what sets its height: 48px from `md` up, 44px below.
               "flex w-full items-center gap-2 px-3 py-1.5 min-h-11 md:min-h-12 cursor-text group transition-colors duration-200",
               !hideBorder && "rounded-[6px] border bg-ods-card border-ods-border",
-              !hideBorder && (focused ? "border-ods-accent" : !isDisabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover"),
-              !hideBorder && isDisabled && "!cursor-not-allowed bg-ods-bg",
+              !hideBorder && (focused ? "border-ods-accent" : !disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover"),
+              !hideBorder && disabled && "!cursor-not-allowed bg-ods-bg",
               hideBorder && "bg-transparent",
             )}
           >
             {startIcon && <span className="flex h-6 shrink-0 items-center">{startIcon}</span>}
 
             <div className="relative flex-1 min-w-0">
+              {/* No chip-line override on the placeholder: it only renders while
+                  the draft is EMPTY, so the editor is always on its plain line
+                  box here. */}
               {isEmpty && !showPreview && (
-                <span className="pointer-events-none absolute left-0 top-0 select-none text-h4 !leading-9 text-ods-text-secondary">
+                <span className="pointer-events-none absolute left-0 top-0 select-none text-h4 text-ods-text-secondary">
                   {disabled ? "Connection lost. Waiting to reconnect..." : placeholder}
                 </span>
               )}
@@ -525,7 +555,7 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
                   text; clearing `previewText` restores the (opacity-hidden)
                   editor. */}
               {showPreview && (
-                <p className="pointer-events-none absolute inset-x-0 top-0 m-0 select-none truncate text-h4 !leading-9 text-ods-text-secondary">
+                <p className={cn("pointer-events-none absolute inset-x-0 top-0 m-0 select-none truncate text-h4 text-ods-text-secondary", hasChips && "!leading-9")}>
                   {previewText}
                 </p>
               )}
@@ -540,7 +570,21 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
                 role="textbox"
                 aria-multiline="true"
                 aria-label={typeof placeholder === 'string' ? placeholder : 'Message'}
-                contentEditable={!isDisabled}
+                // `sending` blocks SENDING, never typing. Taking
+                // `contentEditable` away under a focused editor blurs it, and
+                // iOS dismisses the keyboard on blur; restoring it re-establishes
+                // the input session (and the refocus-after-send effect below
+                // re-presents the keyboard once more), so on a phone the keyboard
+                // flashed shut and open again around every send — repeatedly,
+                // because a host's `sending` toggles once per phase of a turn
+                // (`chatLoading` in `embeddable-chat` is `isTyping ||
+                // isCompacting`, and the legacy Mingo page adds dialog creation).
+                // Nothing is lost by staying editable: `fire()` and the send
+                // button are both gated on `sending` already, so a draft typed
+                // while a turn streams simply waits for its turn — Enter is a
+                // no-op until the send button lights back up. Only `disabled` —
+                // the transport is gone — takes the editor out of service.
+                contentEditable={!disabled}
                 suppressContentEditableWarning
                 spellCheck
                 onInput={handleInput}
@@ -558,17 +602,25 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
                   // see the preview comment above) and is only made transparent;
                   // the absolutely-positioned single-line preview paints over it.
                   showPreview && "opacity-0",
-                  // `leading-9` (36px) sits just above the 32px chip's line-box need
-                  // (~35.5px incl. vertical-align overhead): the LINE drives row
-                  // height (deterministic 48px, no overflow) AND the near-zero slack
-                  // keeps the chip centered. ~4px gap between wrapped chip rows.
-                  // `min-h-9` pins that single-line box even when EMPTY: a non-editable
-                  // (`contentEditable=false`, i.e. disabled/sending) empty div would
-                  // otherwise collapse to 0px, and `items-center` would re-center the
-                  // shorter wrapper in the row — dropping the `top-0` placeholder down.
-                  "min-h-9 text-h4 text-ods-text-primary !leading-9",
+                  // WITH chips, `leading-9` (36px) sits just above the 32px chip's
+                  // line-box need (~35.5px incl. vertical-align overhead): the LINE
+                  // drives row height (deterministic 48px, no overflow) AND the
+                  // near-zero slack keeps the chip centered against the `align-top`
+                  // `h-9` wrapper `buildChipEl` gives it. ~4px gap between wrapped
+                  // chip rows.
+                  // WITHOUT chips there is nothing tall to center, and forcing the
+                  // same 36px box on 14px phone text (`text-h4`) put a blank line's
+                  // worth of air between every wrapped row — so plain drafts keep
+                  // `text-h4`'s own responsive line-height (20px / 24px at md).
+                  // `min-h-*` pins the single-line box even when EMPTY: a
+                  // non-editable (`contentEditable=false`, i.e. `disabled`) empty div
+                  // would otherwise collapse to 0px, and `items-center` would
+                  // re-center the shorter wrapper in the row — dropping the `top-0`
+                  // placeholder down.
+                  "text-h4 text-ods-text-primary",
+                  hasChips ? "min-h-9 !leading-9" : "min-h-[var(--font-line-space-h4-body)]",
                   "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
-                  isDisabled && "cursor-not-allowed",
+                  disabled && "cursor-not-allowed",
                 )}
               />
             </div>

package/src/components/popover.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 
 import { cn } from "../utils/cn"
+import { useKeyboardCollisionPadding } from "../hooks/ui/use-keyboard-collision-padding"
 
 const Popover = PopoverPrimitive.Root
 
@@ -12,20 +13,27 @@ const PopoverTrigger = PopoverPrimitive.Trigger
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
+>(({ className, align = "center", sideOffset = 4, collisionPadding, ...props }, ref) => {
+  // Any popover holding a field — the colour picker's hex/RGB inputs, a search
+  // box — is positioned against a collision viewport that does not know the
+  // software keyboard exists. See useKeyboardCollisionPadding.
+  const keyboardPadding = useKeyboardCollisionPadding()
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        collisionPadding={collisionPadding ?? { bottom: keyboardPadding }}
+        className={cn(
+          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+})
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
 export { Popover, PopoverTrigger, PopoverContent }

package/src/components/ui/autocomplete.tsx

@@ -27,6 +27,7 @@ import { Loader2 } from "lucide-react"
 import { cn } from "../../utils/cn"
 import { TruncateText } from "./truncate-text"
 import { useAutoLimitTags } from "../../hooks/ui/use-auto-limit-tags"
+import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collision-padding"
 import { FieldWrapper } from "./field-wrapper"
 import { HiddenTagsPopup } from "./hidden-tags-popup"
 import { Tag } from "./tag"
@@ -190,6 +191,7 @@ function AutocompleteInner<T = string>(
 
   const [isOpen, setIsOpen] = useState(false)
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
+  const keyboardPadding = useKeyboardCollisionPadding()
   const containerRef = useRef<HTMLDivElement>(null)
   const hiddenTagsPopupRef = useRef<HTMLDivElement>(null)
 
@@ -561,12 +563,17 @@ function AutocompleteInner<T = string>(
         className={cn(
           "z-50 w-[var(--radix-popover-trigger-width)] mt-1",
           "bg-ods-card border border-ods-border rounded-[4px]",
+          "flex flex-col overflow-hidden max-h-[var(--radix-popper-available-height)]",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
           dropdownClassName
         )}
         sideOffset={4}
         align="start"
+        // The anchor is the text field that raises the software keyboard, so
+        // this list is always positioned with the keyboard up — see
+        // useKeyboardCollisionPadding.
+        collisionPadding={{ bottom: keyboardPadding }}
         onOpenAutoFocus={(e) => {
           e.preventDefault()
           autoLimitTags.inputRef.current?.focus()
@@ -578,8 +585,8 @@ function AutocompleteInner<T = string>(
           }
         }}
       >
-        <ScrollAreaPrimitive.Root className="overflow-hidden">
-          <ScrollAreaPrimitive.Viewport className="max-h-[240px] w-full [&>div]:!block">
+        <ScrollAreaPrimitive.Root className="flex min-h-0 flex-col overflow-hidden">
+          <ScrollAreaPrimitive.Viewport className="min-h-0 max-h-[240px] w-full [&>div]:!block">
             <div role="listbox">
               {loading ? (
                 <div className="px-3 py-2 text-ods-text-secondary text-h6">

package/src/components/ui/file-upload.tsx

@@ -325,7 +325,11 @@ export function FileUpload<T extends FileUploadCandidate = File>({
     // already on screen, an unreadable selection), and this runs from a click
     // handler where a rejection would go unhandled.
     try {
-      handleFiles(await pickFiles())
+      // Skip the empty (cancelled) case rather than routing it through
+      // handleFiles, whose first act is to clear a validation message the user
+      // may still be reading.
+      const picked = await pickFiles()
+      if (picked.length > 0) handleFiles(picked)
     } catch (err) {
       setValidationError(err instanceof Error ? err.message : "Could not open the file picker")
     }

package/src/components/ui/search-input.tsx

@@ -6,6 +6,7 @@ import * as React from "react"
 import { cn } from "../../utils/cn"
 import { useDebounce } from "../../hooks/ui/use-debounce"
 import { useAutoLimitTags } from "../../hooks/ui/use-auto-limit-tags"
+import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collision-padding"
 import { SearchIcon } from "../icons-v2-generated"
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon"
 import { Tag } from "./tag"
@@ -168,6 +169,7 @@ export function SearchInput({
   // ---- Popover state ----
   const [isOpen, setIsOpen] = React.useState(false)
   const [highlightedIndex, setHighlightedIndex] = React.useState(-1)
+  const keyboardPadding = useKeyboardCollisionPadding()
 
   const containerRef = React.useRef<HTMLDivElement>(null)
 
@@ -499,6 +501,7 @@ export function SearchInput({
           className={cn(
             "z-50 w-[var(--radix-popover-trigger-width)] mt-1",
             "bg-ods-card border border-ods-border rounded-[6px] overflow-hidden shadow-lg",
+            "flex flex-col max-h-[var(--radix-popper-available-height)]",
             "data-[state=open]:animate-in data-[state=closed]:animate-out",
             "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -507,6 +510,10 @@ export function SearchInput({
           )}
           sideOffset={4}
           align="start"
+          // The anchor is the search field that raises the software keyboard,
+          // so these suggestions are always positioned with the keyboard up —
+          // see useKeyboardCollisionPadding.
+          collisionPadding={{ bottom: keyboardPadding }}
           onOpenAutoFocus={(e) => {
             e.preventDefault()
             inputRef.current?.focus()
@@ -517,8 +524,8 @@ export function SearchInput({
             }
           }}
         >
-          <ScrollAreaPrimitive.Root className="overflow-hidden">
-            <ScrollAreaPrimitive.Viewport className="max-h-[320px] w-full">
+          <ScrollAreaPrimitive.Root className="flex min-h-0 flex-col overflow-hidden">
+            <ScrollAreaPrimitive.Viewport className="min-h-0 max-h-[320px] w-full">
               <div role="listbox">
                 {renderDropdownContent()}
               </div>

package/src/components/ui/searchable-select.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import { CheckIcon, SearchIcon } from '../icons-v2-generated'
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon'
 import { cn } from '../../utils/cn'
+import { useKeyboardCollisionPadding } from '../../hooks/ui/use-keyboard-collision-padding'
 import { Input } from './input'
 
 export interface SearchableSelectOption {
@@ -67,6 +68,7 @@ export function SearchableSelect({
 }: SearchableSelectProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const [search, setSearch] = React.useState('')
+  const keyboardPadding = useKeyboardCollisionPadding()
 
   React.useEffect(() => {
     if (!isOpen) setSearch('')
@@ -119,8 +121,13 @@ export function SearchableSelect({
         <PopoverPrimitive.Content
           align={align}
           sideOffset={6}
+          // The search field below raises the software keyboard the moment this
+          // opens — see useKeyboardCollisionPadding for why neither the collision
+          // viewport nor the available height knows about it otherwise.
+          collisionPadding={{ bottom: keyboardPadding }}
           className={cn(
             'z-50 min-w-[var(--radix-popover-trigger-width)] bg-ods-card border border-ods-border rounded-md shadow-lg overflow-hidden',
+            'flex flex-col max-h-[var(--radix-popper-available-height)]',
             'data-[state=open]:animate-in data-[state=closed]:animate-out',
             'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
             'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
@@ -128,7 +135,7 @@ export function SearchableSelect({
             contentClassName,
           )}
         >
-          <div className="border-b border-ods-border">
+          <div className="shrink-0 border-b border-ods-border">
             <Input
               autoFocus
               value={search}
@@ -138,7 +145,7 @@ export function SearchableSelect({
               className="rounded-none border-0"
             />
           </div>
-          <div className="max-h-80 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
+          <div className="min-h-0 max-h-80 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
             {isLoading ? (
               <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary">
                 {loadingText}

package/src/components/ui/tag-select-dropdown.tsx

@@ -3,6 +3,7 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import * as React from 'react'
 import { cn } from '../../utils/cn'
+import { useKeyboardCollisionPadding } from '../../hooks/ui/use-keyboard-collision-padding'
 import { CheckIcon, PlusIcon, SearchIcon, TrashIcon } from '../icons-v2-generated'
 import { Button } from './button'
 import { Input } from './input'
@@ -59,6 +60,7 @@ export function TagSelectDropdown({
 }: TagSelectDropdownProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const [search, setSearch] = React.useState('')
+  const keyboardPadding = useKeyboardCollisionPadding()
 
   React.useEffect(() => {
     if (!isOpen) setSearch('')
@@ -110,15 +112,19 @@ export function TagSelectDropdown({
         <PopoverPrimitive.Content
           align={align}
           sideOffset={6}
+          // The search field below raises the software keyboard the moment this
+          // opens — see useKeyboardCollisionPadding.
+          collisionPadding={{ bottom: keyboardPadding }}
           className={cn(
             'z-50 w-72 bg-ods-card border border-ods-border rounded-[6px] shadow-lg overflow-hidden',
+            'flex flex-col max-h-[var(--radix-popper-available-height)]',
             'data-[state=open]:animate-in data-[state=closed]:animate-out',
             'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
             'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
             'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
           )}
         >
-          <div className="border-b border-ods-border">
+          <div className="shrink-0 border-b border-ods-border">
             <Input
               autoFocus
               value={search}
@@ -134,7 +140,7 @@ export function TagSelectDropdown({
               className="rounded-none border-0"
             />
           </div>
-          <div className="max-h-72 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
+          <div className="min-h-0 max-h-72 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
             {ordered.map(opt => {
               const isSelected = selectedIds.includes(opt.id)
               return (

package/src/components/ui/tags-manager.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../utils/cn";
+import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collision-padding";
 import {
 	CheckIcon,
 	PencilIcon,
@@ -70,6 +71,7 @@ export function TagsManager({
 }: TagsManagerProps) {
 	const [open, setOpen] = React.useState(false);
 	const [search, setSearch] = React.useState("");
+	const keyboardPadding = useKeyboardCollisionPadding();
 	const [editingId, setEditingId] = React.useState<string | null>(null);
 	const [editingName, setEditingName] = React.useState("");
 	const editInputRef = React.useRef<HTMLInputElement>(null);
@@ -242,6 +244,7 @@ export function TagsManager({
 						className={cn(
 							"z-50 w-[var(--radix-popover-trigger-width)] mt-1",
 							"bg-ods-card border border-ods-border rounded",
+							"flex flex-col overflow-hidden max-h-[var(--radix-popper-available-height)]",
 							"data-[state=open]:animate-in data-[state=closed]:animate-out",
 							"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 							"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -249,6 +252,10 @@ export function TagsManager({
 						)}
 						sideOffset={4}
 						align="start"
+						// The anchor is the tag field that raises the software keyboard, so
+						// this list is always positioned with the keyboard up — see
+						// useKeyboardCollisionPadding.
+						collisionPadding={{ bottom: keyboardPadding }}
 						onOpenAutoFocus={(e) => {
 							e.preventDefault();
 							inputRef.current?.focus();
@@ -259,8 +266,8 @@ export function TagsManager({
 							}
 						}}
 					>
-						<ScrollAreaPrimitive.Root className="overflow-hidden">
-							<ScrollAreaPrimitive.Viewport className="max-h-60 w-full">
+						<ScrollAreaPrimitive.Root className="flex min-h-0 flex-col overflow-hidden">
+							<ScrollAreaPrimitive.Viewport className="min-h-0 max-h-60 w-full">
 								<div role="listbox">
 									{filtered.map((tag) => {
 										const isSelected = selectedIds.includes(tag.id);

package/src/hooks/ui/index.ts

@@ -8,6 +8,7 @@ export * from './use-horizontal-scrollbar'
 export * from './use-image-edge-color'
 export * from './use-is-truncated'
 export * from './use-isomorphic-layout-effect'
+export * from './use-keyboard-collision-padding'
 export * from './use-local-storage'
 export * from './use-marquee-engine'
 export * from './use-media-query'

package/src/hooks/ui/use-keyboard-collision-padding.ts

@@ -0,0 +1,101 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+/**
+ * Extra `collisionPadding.bottom` (px) a Radix popper needs to clear the
+ * software keyboard. 0 on desktop and anywhere the keyboard is down.
+ *
+ * Radix positions every popper with floating-ui at `strategy: 'fixed'`, and
+ * floating-ui takes its collision viewport from `window.visualViewport`.
+ * Neither mobile shell shrinks the box a keyboard opens into: iOS runs
+ * Capacitor's Keyboard plugin at `resize: 'none'`, which leaves the WKWebView
+ * frame alone, and Android's window is edge-to-edge, where the IME is only a
+ * WindowInsets type. So `flip`/`shift`/`size` all believe the screen still
+ * reaches the bottom, and a dropdown whose own search field just raised the
+ * keyboard is placed straight behind it — worst inside modals, which sit near
+ * the bottom of the screen by design.
+ *
+ * The shell publishes the keyboard height as `--of-keyboard-inset` on <html>
+ * (openframe-frontend's `keyboard-inset.ts`; unset everywhere else, hence the
+ * 0 default). Handing the part floating-ui does not already know about back as
+ * collision padding is what makes the top of the keyboard the bottom edge of
+ * the screen.
+ *
+ * ```tsx
+ * const keyboardPadding = useKeyboardCollisionPadding()
+ * <PopoverPrimitive.Content collisionPadding={{ bottom: keyboardPadding }} />
+ * ```
+ *
+ * Pair it with `max-h-[var(--radix-popper-available-height)]` on the content:
+ * padding alone flips a dropdown above its trigger, but a list taller than what
+ * is left above the keyboard would then spill back over it.
+ */
+
+const KEYBOARD_INSET_VAR = '--of-keyboard-inset'
+
+function measure(): number {
+  if (typeof document === 'undefined') return 0
+  const inset = Number.parseFloat(
+    getComputedStyle(document.documentElement).getPropertyValue(KEYBOARD_INSET_VAR),
+  )
+  // Also catches the NaN of an unset variable.
+  if (!(inset > 0)) return 0
+  // How far floating-ui's own viewport bottom sits below the top of the
+  // keyboard. iOS reports the keyboard on the visual viewport and Android does
+  // not; measuring the difference rather than branching on the platform keeps
+  // both correct and can never reserve the same keyboard twice.
+  const layoutHeight = document.documentElement.clientHeight
+  const viewport = window.visualViewport
+  const viewportBottom = viewport ? viewport.offsetTop + viewport.height : layoutHeight
+  return Math.max(0, Math.round(viewportBottom - (layoutHeight - inset)))
+}
+
+// One document-wide subscription for every popper on the page: the keyboard is
+// a single global, and each open dropdown re-reading it would mean another
+// MutationObserver plus a forced style resolve per keystroke-driven re-render.
+const listeners = new Set<() => void>()
+let padding = 0
+let teardown: (() => void) | null = null
+
+function sync(): void {
+  const next = measure()
+  if (next === padding) return
+  padding = next
+  for (const notify of listeners) notify()
+}
+
+function subscribe(onStoreChange: () => void): () => void {
+  listeners.add(onStoreChange)
+  if (listeners.size === 1) {
+    padding = measure()
+    // Two independent signals. The inset lands on <html>'s inline style, so the
+    // attribute is the only notification for it; the visual viewport moves on
+    // its own schedule (iOS reports the keyboard there, and a pinch-zoom shifts
+    // it with no keyboard involved at all) and changes what is left to reserve.
+    const observer = new MutationObserver(sync)
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] })
+    const viewport = window.visualViewport
+    viewport?.addEventListener('resize', sync)
+    viewport?.addEventListener('scroll', sync)
+    teardown = () => {
+      observer.disconnect()
+      viewport?.removeEventListener('resize', sync)
+      viewport?.removeEventListener('scroll', sync)
+    }
+  }
+  return () => {
+    listeners.delete(onStoreChange)
+    if (listeners.size > 0) return
+    teardown?.()
+    teardown = null
+  }
+}
+
+export function useKeyboardCollisionPadding(): number {
+  return useSyncExternalStore(
+    subscribe,
+    () => padding,
+    () => 0,
+  )
+}