From bbc50197c26384e31d22034afffd603bb839fb8a Mon Sep 17 00:00:00 2001
From: Abdur Rahman <mmarahman4847@gmail.com>
Date: Wed, 6 Aug 2025 03:04:17 +0530
Subject: [PATCH] fix: improve close button alignment in chat error containers
 (#782)

Adjusted positioning to top-2.5 left-2 and add left padding to prevent
text overlap with the close button.

<img width="715" height="61" alt="image"
src="https://github.com/user-attachments/assets/1e47f577-2b11-4928-82a6-053abc77dd1e"
/>

<img width="727" height="101" alt="image"
src="https://github.com/user-attachments/assets/b6058eca-93e0-445e-b17a-dee81911b90b"
/>
---
 package-lock.json                    | 4 ++--
 src/components/chat/ChatErrorBox.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8886cdf..cd491bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "dyad",
-  "version": "0.14.0-beta.1",
+  "version": "0.15.0-beta.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dyad",
-      "version": "0.14.0-beta.1",
+      "version": "0.15.0-beta.2",
       "license": "MIT",
       "dependencies": {
         "@ai-sdk/anthropic": "^1.2.8",
diff --git a/src/components/chat/ChatErrorBox.tsx b/src/components/chat/ChatErrorBox.tsx
index 2c8d6b9..b925653 100644
--- a/src/components/chat/ChatErrorBox.tsx
+++ b/src/components/chat/ChatErrorBox.tsx
@@ -101,11 +101,11 @@ function ChatErrorContainer({
     <div className="relative mt-2 bg-red-50 border border-red-200 rounded-md shadow-sm p-2 mx-4">
       <button
         onClick={onDismiss}
-        className="absolute top-1 left-1 p-1 hover:bg-red-100 rounded"
+        className="absolute top-2.5 left-2 p-1 hover:bg-red-100 rounded"
       >
         <X size={14} className="text-red-500" />
       </button>
-      <div className="px-6 py-1 text-sm">
+      <div className="pl-8 py-1 text-sm">
         <div className="text-red-700 text-wrap">
           {typeof children === "string" ? (
             <ReactMarkdown
@@ -149,11 +149,11 @@ function ChatInfoContainer({
     <div className="relative mt-2 bg-sky-50 border border-sky-200 rounded-md shadow-sm p-2 mx-4">
       <button
         onClick={onDismiss}
-        className="absolute top-1 left-1 p-1 hover:bg-sky-100 rounded"
+        className="absolute top-2.5 left-2 p-1 hover:bg-sky-100 rounded"
       >
         <X size={14} className="text-sky-600" />
       </button>
-      <div className="px-6 py-1 text-sm">
+      <div className="pl-8 py-1 text-sm">
         <div className="text-sky-800 text-wrap">{children}</div>
       </div>
     </div>