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 && (