From 4a4818e933ecd2da2b0620ee05896218e38e5dd4 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sun, 22 Mar 2026 18:49:26 -0400
Subject: [PATCH] fix InlineError blank space and ElicitationUrlPanel URL
 overflow

Only render InlineError details Stack when there is content to show.
Add wrapping Code theme variant for long URLs that would push buttons
offscreen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../atoms/InlineError/InlineError.tsx         | 45 ++++++++++---------
 .../ElicitationUrlPanel.tsx                   |  4 +-
 clients/web/src/theme/Code.ts                 | 13 ++++--
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/clients/web/src/components/atoms/InlineError/InlineError.tsx b/clients/web/src/components/atoms/InlineError/InlineError.tsx
index e08dabaa..bca095c2 100644
--- a/clients/web/src/components/atoms/InlineError/InlineError.tsx
+++ b/clients/web/src/components/atoms/InlineError/InlineError.tsx
@@ -16,28 +16,33 @@ export function InlineError({
   maxRetries,
   docLink,
 }: InlineErrorProps) {
+  const hasDetails =
+    retryCount !== undefined || details !== undefined || docLink !== undefined;
+
   return (
     <Alert color="red" variant="light" title={message}>
-      <Stack gap="xs">
-        {retryCount !== undefined && (
-          <Text size="sm">
-            Retry attempt {retryCount}
-            {maxRetries !== undefined && ` of ${maxRetries}`}
-          </Text>
-        )}
-        {details && (
-          <Spoiler maxHeight={0} showLabel="Show more" hideLabel="Show less">
-            <Text size="sm">{details}</Text>
-          </Spoiler>
-        )}
-        {docLink && (
-          <Group>
-            <Anchor href={docLink} target="_blank" size="sm">
-              View Troubleshooting Guide &rarr;
-            </Anchor>
-          </Group>
-        )}
-      </Stack>
+      {hasDetails && (
+        <Stack gap="xs">
+          {retryCount !== undefined && (
+            <Text size="sm">
+              Retry attempt {retryCount}
+              {maxRetries !== undefined && ` of ${maxRetries}`}
+            </Text>
+          )}
+          {details && (
+            <Spoiler maxHeight={0} showLabel="Show more" hideLabel="Show less">
+              <Text size="sm">{details}</Text>
+            </Spoiler>
+          )}
+          {docLink && (
+            <Group>
+              <Anchor href={docLink} target="_blank" size="sm">
+                View Troubleshooting Guide &rarr;
+              </Anchor>
+            </Group>
+          )}
+        </Stack>
+      )}
     </Alert>
   );
 }
diff --git a/clients/web/src/components/molecules/ElicitationUrlPanel/ElicitationUrlPanel.tsx b/clients/web/src/components/molecules/ElicitationUrlPanel/ElicitationUrlPanel.tsx
index c60486f7..dd924368 100644
--- a/clients/web/src/components/molecules/ElicitationUrlPanel/ElicitationUrlPanel.tsx
+++ b/clients/web/src/components/molecules/ElicitationUrlPanel/ElicitationUrlPanel.tsx
@@ -35,7 +35,9 @@ export function ElicitationUrlPanel({
       </Text>
       <Divider />
       <Text size="sm">The server is requesting you visit:</Text>
-      <Code block>{url}</Code>
+      <Code block variant="wrapping">
+        {url}
+      </Code>
       <Group>
         <Button variant="light" onClick={onCopyUrl}>
           Copy URL
diff --git a/clients/web/src/theme/Code.ts b/clients/web/src/theme/Code.ts
index b50d4a4b..77609c59 100644
--- a/clients/web/src/theme/Code.ts
+++ b/clients/web/src/theme/Code.ts
@@ -1,9 +1,14 @@
 import { Code } from "@mantine/core";
 
 export const ThemeCode = Code.extend({
-  styles: () => ({
-    root: {
+  styles: (_theme, props) => {
+    const root: Record<string, string> = {
       backgroundColor: "var(--inspector-surface-code)",
-    },
-  }),
+    };
+    if (props.variant === "wrapping") {
+      root.wordBreak = "break-all";
+      root.whiteSpace = "pre-wrap";
+    }
+    return { root };
+  },
 });