From e5b905a4214d00bd94816bf28f0d76fda12d2c3a Mon Sep 17 00:00:00 2001
From: joshunrau <contact@joshuaunrau.com>
Date: Wed, 14 Jan 2026 14:27:38 -0500
Subject: [PATCH 1/2] fix: prevent icon in error message shrinking

---
 src/components/Form/ErrorMessage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Form/ErrorMessage.tsx b/src/components/Form/ErrorMessage.tsx
index 9d084369..d4d25a41 100644
--- a/src/components/Form/ErrorMessage.tsx
+++ b/src/components/Form/ErrorMessage.tsx
@@ -9,7 +9,7 @@ export const ErrorMessage: React.FC<{ className?: string; error?: null | string[
     <div className="flex flex-col gap-1.5">
       {error.map((message) => (
         <div className={cn('text-destructive flex w-full items-center text-sm font-medium', className)} key={message}>
-          <CircleAlertIcon className="mr-1" style={{ strokeWidth: '2px' }} />
+          <CircleAlertIcon className="mr-1 shrink-0" style={{ strokeWidth: '2px' }} />
           <span data-testid="error-message-text">{message}</span>
         </div>
       )) ?? null}

From 661ae9ed8b8620898f85747e5eb7785e381491bf Mon Sep 17 00:00:00 2001
From: joshunrau <contact@joshuaunrau.com>
Date: Wed, 14 Jan 2026 16:13:54 -0500
Subject: [PATCH 2/2] fix: hide icon for long root errors using css container
 query with flex wrap solution

---
 src/components/Form/ErrorMessage.tsx | 36 ++++++++++++++++++++++------
 src/components/Form/Form.tsx         |  6 ++++-
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/Form/ErrorMessage.tsx b/src/components/Form/ErrorMessage.tsx
index d4d25a41..739b8915 100644
--- a/src/components/Form/ErrorMessage.tsx
+++ b/src/components/Form/ErrorMessage.tsx
@@ -4,15 +4,37 @@ import { CircleAlertIcon } from 'lucide-react';
 
 import { cn } from '@/utils';
 
-export const ErrorMessage: React.FC<{ className?: string; error?: null | string[] }> = ({ className, error }) => {
-  return error ? (
+export const ErrorMessage: React.FC<{ className?: string; error?: null | string[]; hideIconOnWrap?: boolean }> = ({
+  className,
+  error,
+  hideIconOnWrap
+}) => {
+  if (!error) {
+    return null;
+  }
+  return (
     <div className="flex flex-col gap-1.5">
       {error.map((message) => (
-        <div className={cn('text-destructive flex w-full items-center text-sm font-medium', className)} key={message}>
-          <CircleAlertIcon className="mr-1 shrink-0" style={{ strokeWidth: '2px' }} />
-          <span data-testid="error-message-text">{message}</span>
+        <div
+          className={cn(
+            'text-destructive flex w-full items-center text-sm font-medium',
+            hideIconOnWrap && 'flex-wrap',
+            className
+          )}
+          key={message}
+        >
+          <div className="@container/alert mr-1.5 flex min-w-4 shrink-0 flex-grow-[1] items-center justify-start">
+            <div className="h-0 w-0" />
+            <CircleAlertIcon
+              className="@min-[24px]/alert:hidden"
+              style={{ height: '16px', strokeWidth: '2px', width: '16px' }}
+            />
+          </div>
+          <span className="flex-grow-[999]" data-testid="error-message-text">
+            {message}
+          </span>
         </div>
-      )) ?? null}
+      ))}
     </div>
-  ) : null;
+  );
 };
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 2b77e38a..ba24147b 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -236,7 +236,11 @@ const Form = <TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['
           values={values}
         />
       )}
-      {Boolean(rootErrors.length) && <ErrorMessage className="-mt-3" error={rootErrors} />}
+      {Boolean(rootErrors.length) && (
+        <div className="-mt-3">
+          <ErrorMessage hideIconOnWrap error={rootErrors} />
+        </div>
+      )}
       {fieldsFooter}
       <div className="flex w-full gap-3">
         {additionalButtons?.left}