From 6c4d0f85621d0ddc11ecb3609e661dc8a27c0f2c Mon Sep 17 00:00:00 2001
From: Louis <louisjoecodes@gmail.com>
Date: Tue, 7 May 2024 15:37:44 +0100
Subject: [PATCH] fix: long errors overflowing

---
 .../src/components/Warning.stories.tsx                | 11 +++++++++++
 .../quary-extension-ui/src/components/Warning.tsx     |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/js/packages/quary-extension-ui/src/components/Warning.stories.tsx b/js/packages/quary-extension-ui/src/components/Warning.stories.tsx
index 33164b17..3b5f2e6d 100644
--- a/js/packages/quary-extension-ui/src/components/Warning.stories.tsx
+++ b/js/packages/quary-extension-ui/src/components/Warning.stories.tsx
@@ -16,3 +16,14 @@ export const Main: Story = {
       'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum.',
   },
 }
+
+export const LongError: Story = {
+  args: {
+    title: 'Attention needed',
+    children:
+    `Error reading .schema file: Failed to await js function: JsValue(EntryNotFound (FileSystemError): Error: ENOENT: no such file or directory, open '/Users/louisjordan/Desktop/analysis/quary_jaffle_shop/models/staging/schema.yaml'
+    EntryNotFound (FileSystemError): Error: ENOENT: no such file or directory, open '/Users/louisjordan/Desktop/analysis/quary_jaffle_shop/models/staging/schema.yaml'
+        at Function.e (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:149:6084)
+        at Object.readFile (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:149:4463))`,
+  },
+}
diff --git a/js/packages/quary-extension-ui/src/components/Warning.tsx b/js/packages/quary-extension-ui/src/components/Warning.tsx
index da91346e..fb74bfd9 100644
--- a/js/packages/quary-extension-ui/src/components/Warning.tsx
+++ b/js/packages/quary-extension-ui/src/components/Warning.tsx
@@ -9,7 +9,7 @@ export const Warning: React.FC<React.PropsWithChildren<Props>> = ({
   children,
   title,
 }) => (
-  <div className="bg-vscode-inputValidation-warningBackground rounded-md p-4">
+  <div className="bg-vscode-inputValidation-warningBackground rounded-md p-4 overflow-auto">
     <div className="flex">
       <div className="flex-shrink-0">
         <ExclamationTriangleIcon