fix(web): align multiline error alert controls

apps/web/src/components/chat/ThreadErrorBanner.test.tsx

@@ -0,0 +1,23 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vite-plus/test";
+
+import { ThreadErrorBanner } from "./ThreadErrorBanner";
+
+describe("ThreadErrorBanner", () => {
+  it("aligns the warning and dismiss icons with the first line of a multi-line error", () => {
+    const markup = renderToStaticMarkup(
+      <ThreadErrorBanner
+        error={"The first error line\ncontinues on a second line"}
+        onDismiss={() => {}}
+      />,
+    );
+
+    expect(markup).toContain('role="alert"');
+    expect(markup).toContain('aria-label="Dismiss error"');
+    expect(markup).not.toContain("controlAlignment");
+    expect(markup).toContain("flex gap-2 items-start");
+    expect(markup).toContain("min-h-7 pt-1 sm:min-h-6 sm:pt-0.5");
+    expect(markup).toContain("h-lh w-4");
+    expect(markup).toContain("h-lh self-start");
+  });
+});

apps/web/src/components/chat/ThreadErrorBanner.tsx

@@ -14,7 +14,7 @@ export const ThreadErrorBanner = memo(function ThreadErrorBanner({
   if (!error) return null;
   return (
     <div className="mx-auto w-fit max-w-[min(48rem,calc(100%-2rem))] pt-3">
-      <Alert variant="error">
+      <Alert variant="error" controlAlignment="first-line">
         <CircleAlertIcon />
         <AlertDescription>
           <Tooltip>

apps/web/src/components/ui/alert.tsx

@@ -42,9 +42,13 @@ function alertChildSlot(child: React.ReactElement): string | undefined {
 function Alert({
   className,
   variant,
+  controlAlignment = "center",
   children,
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof alertVariants> & {
+    controlAlignment?: "center" | "first-line";
+  }) {
   const icon: React.ReactNode[] = [];
   const content: React.ReactNode[] = [];
   const action: React.ReactNode[] = [];
@@ -71,17 +75,39 @@ function Alert({
       role="alert"
       {...props}
     >
-      <div className="flex items-center gap-2">
+      <div
+        className={cn(
+          "flex gap-2",
+          controlAlignment === "first-line" ? "items-start" : "items-center",
+          controlAlignment === "first-line" &&
+            action.length > 0 &&
+            "min-h-7 pt-1 sm:min-h-6 sm:pt-0.5",
+        )}
+      >
         {icon.length > 0 && (
-          <div className="flex size-4 shrink-0 items-center justify-center [&>svg]:size-full">
+          <div
+            className={cn(
+              "flex shrink-0 items-center justify-center",
+              controlAlignment === "first-line"
+                ? "h-lh w-4 [&>svg]:size-4"
+                : "size-4 [&>svg]:size-full",
+            )}
+          >
             {icon}
           </div>
         )}
         {content.length > 0 && (
           <div className="flex min-w-0 flex-1 flex-col gap-0.5">{content}</div>
         )}
         {action.length > 0 && (
-          <div className="flex shrink-0 items-center self-center">{action}</div>
+          <div
+            className={cn(
+              "flex shrink-0 items-center",
+              controlAlignment === "first-line" ? "h-lh self-start" : "self-center",
+            )}
+          >
+            {action}
+          </div>
         )}
       </div>
     </div>