From 26be00804c7df721c5f66defa19df05993db5d38 Mon Sep 17 00:00:00 2001 From: Sufi S Date: Mon, 29 Jun 2026 11:38:23 -0600 Subject: [PATCH 1/2] fix(command-center): make new-task tile scrollable in tiled layouts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The new-task TaskInput vertically centers its editor with the repo/branch selectors floated above and suggestions floated below. Inside a Command Center tile (overflow-hidden), that absolutely-positioned content overflowed the clipped tile bounds and could not be scrolled into view in the 2x2, 3x2, and 3x3 layouts — only the editor's own internal scroll worked, so the execute button, suggestions, and branch/repo selectors were unreachable without zooming out or switching to a 1x1/1x2 view. Add a `compact` prop to TaskInput that stacks the selectors, editor, and suggestions in normal document flow inside a vertically scrollable column, and wire it from the Command Center tile. Generated-By: PostHog Code Task-Id: 10321b86-ed5b-4ade-9732-1fa4afa11f02 --- .../components/CommandCenterPanel.tsx | 6 +- .../task-detail/components/TaskInput.tsx | 60 ++++++++++++++----- 2 files changed, 51 insertions(+), 15 deletions(-) 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..3750e258ef 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,41 @@ export function TaskInput({ className="relative h-full w-full" > - +
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 && ( From 35470a8c2661a2494399963bf9acf1fdf20d442a Mon Sep 17 00:00:00 2001 From: Sufi S Date: Mon, 29 Jun 2026 12:06:22 -0600 Subject: [PATCH 2/2] fix(command-center): skip dot-pattern background in compact mode The decorative DotPatternBackground is absolutely positioned at the bottom of its container. In compact mode the container is a scroll container, so the pattern would stay pinned to the visible edge instead of tracking the scrolled content. It's purely cosmetic, so skip it in compact tiles rather than fight the scroll container. Generated-By: PostHog Code Task-Id: 10321b86-ed5b-4ade-9732-1fa4afa11f02 --- .../ui/src/features/task-detail/components/TaskInput.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/features/task-detail/components/TaskInput.tsx b/packages/ui/src/features/task-detail/components/TaskInput.tsx index 3750e258ef..c0c5325ea8 100644 --- a/packages/ui/src/features/task-detail/components/TaskInput.tsx +++ b/packages/ui/src/features/task-detail/components/TaskInput.tsx @@ -770,7 +770,11 @@ export function TaskInput({ height="100%" className={clsx("relative px-4", compact && "overflow-y-auto")} > - + {/* 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 && }