From 83c61641c971e6f1881789262cc062921b3eab1c Mon Sep 17 00:00:00 2001 From: claude_code Date: Mon, 22 Jun 2026 20:22:53 +0300 Subject: [PATCH] fix(ai-chat): prevent error banner from clipping its text The error banner is a flex child of the chat panel column. Mantine's Alert root is `overflow: hidden`, which (per the CSS flexbox spec) drops its automatic min-height to 0, so when the message history fills the panel the flexbox compressed the banner below its content height and the overflow:hidden clipped the detail text (e.g. "Please try again."). Set flex-shrink: 0 on the banner so it always shows its full content; the scrollable message list absorbs the height pressure instead. Co-Authored-By: Claude Opus 4.8 --- .../ai-chat/components/chat-error-alert.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/apps/client/src/features/ai-chat/components/chat-error-alert.tsx b/apps/client/src/features/ai-chat/components/chat-error-alert.tsx index e8fd2c5c..08f91787 100644 --- a/apps/client/src/features/ai-chat/components/chat-error-alert.tsx +++ b/apps/client/src/features/ai-chat/components/chat-error-alert.tsx @@ -18,12 +18,23 @@ interface ChatErrorAlertProps extends Omit { export default function ChatErrorAlert({ title, detail, + style, ...alertProps }: ChatErrorAlertProps) { // Mantine's own "light" alert colour, adaptive across light/dark schemes. const accent = "var(--mantine-color-red-light-color)"; return ( - + // flexShrink: 0 keeps the banner fully visible. Mantine's Alert root is + // `overflow: hidden`, so as a flex child of the chat panel it can otherwise + // be compressed below its content height and clip the detail text; the + // scrollable message list absorbs the height pressure instead. +