diff --git a/packages/ui/src/features/command-center/components/CommandCenterPanel.tsx b/packages/ui/src/features/command-center/components/CommandCenterPanel.tsx index c397272f6d..076ae86f09 100644 --- a/packages/ui/src/features/command-center/components/CommandCenterPanel.tsx +++ b/packages/ui/src/features/command-center/components/CommandCenterPanel.tsx @@ -153,7 +153,11 @@ function EmptyCell({ cellIndex }: { cellIndex: number }) { - + ); diff --git a/packages/ui/src/features/task-detail/components/TaskInput.tsx b/packages/ui/src/features/task-detail/components/TaskInput.tsx index 14af9433d1..c0c5325ea8 100644 --- a/packages/ui/src/features/task-detail/components/TaskInput.tsx +++ b/packages/ui/src/features/task-detail/components/TaskInput.tsx @@ -10,6 +10,7 @@ import { navigateToInbox } from "@posthog/ui/router/navigationBridge"; import { useAppView } from "@posthog/ui/router/useAppView"; import { Flex, Text, Tooltip } from "@radix-ui/themes"; import { useQuery } from "@tanstack/react-query"; +import clsx from "clsx"; import { AnimatePresence, motion } from "framer-motion"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useConnectivity } from "../../../hooks/useConnectivity"; @@ -108,6 +109,14 @@ interface TaskInputProps { * the chip is non-interactive (only dismissable). */ onContextChipClick?: () => void; + /** + * Embedded/compact layout for small containers (e.g. a Command Center tile). + * Instead of vertically centering the input with the repo/branch selectors + * floated above and the suggestions floated below — which overflow and become + * unreachable inside a clipped tile — the selectors, input, and suggestions + * stack in normal flow inside a vertically scrollable column. + */ + compact?: boolean; } export function TaskInput({ @@ -125,6 +134,7 @@ export function TaskInput({ suggestions, onSuggestionSelect, onContextChipClick, + compact = false, }: TaskInputProps = {}) { const cloudRegion = useAuthStateValue((s) => s.cloudRegion); const trpc = useHostTRPC(); @@ -755,24 +765,45 @@ export function TaskInput({ className="relative h-full w-full" > - - + + {/* The dot pattern is absolutely anchored to the bottom; in compact + mode the parent scrolls, so it would stay pinned to the visible + edge instead of tracking content. It's purely decorative, so skip + it there rather than fight the scroll container. */} + {!compact && }
0 ? "38%" : "50%", - transform: "translate(-50%, -50%)", - }} - className="absolute left-1/2 z-[1] flex w-[calc(100%-2rem)] max-w-[600px] flex-col gap-2" + style={ + compact + ? undefined + : { + // Raise the input when the suggestion cards are shown so the + // longer list below it isn't squished against the bottom of + // the viewport. Note: this is NOT tied to `editorIsEmpty` — + // the input keeps its position as the user types so the box + // doesn't jump down when the suggestions fade out (and back + // in when the prompt is cleared). + top: suggestions && suggestions.length > 0 ? "38%" : "50%", + transform: "translate(-50%, -50%)", + } + } + className={clsx( + "z-[1] flex max-w-[600px] flex-col gap-2", + compact + ? "mx-auto w-full py-6" + : "absolute left-1/2 w-[calc(100%-2rem)]", + )} > )} -
+
{suggestions ? ( {suggestions.length > 0 && editorIsEmpty && (