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"
/>
This commit is contained in:
Abdur Rahman
2025-08-06 03:04:17 +05:30
committed by GitHub
parent 5db0b04400
commit bbc50197c2
2 changed files with 6 additions and 6 deletions

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "dyad", "name": "dyad",
"version": "0.14.0-beta.1", "version": "0.15.0-beta.2",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "dyad", "name": "dyad",
"version": "0.14.0-beta.1", "version": "0.15.0-beta.2",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ai-sdk/anthropic": "^1.2.8", "@ai-sdk/anthropic": "^1.2.8",

View File

@@ -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"> <div className="relative mt-2 bg-red-50 border border-red-200 rounded-md shadow-sm p-2 mx-4">
<button <button
onClick={onDismiss} 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" /> <X size={14} className="text-red-500" />
</button> </button>
<div className="px-6 py-1 text-sm"> <div className="pl-8 py-1 text-sm">
<div className="text-red-700 text-wrap"> <div className="text-red-700 text-wrap">
{typeof children === "string" ? ( {typeof children === "string" ? (
<ReactMarkdown <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"> <div className="relative mt-2 bg-sky-50 border border-sky-200 rounded-md shadow-sm p-2 mx-4">
<button <button
onClick={onDismiss} 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" /> <X size={14} className="text-sky-600" />
</button> </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 className="text-sky-800 text-wrap">{children}</div>
</div> </div>
</div> </div>