Fix overflow issues with SQL errors (#27321)

frontend/src/metabase/query_builder/components/VisualizationError.jsx

@@ -16,6 +16,7 @@ import {
   QueryErrorTitle,
   QueryErrorLink,
   QueryErrorMessage,
+  QueryErrorContent,
 } from "./VisualizationError.styled";
 
 const EmailAdmin = () => {
@@ -146,16 +147,18 @@ class VisualizationError extends Component {
       }
       return (
         <QueryError className={className}>
-          <QueryErrorHeader>
-            <QueryErrorIcon name="warning" />
-            <QueryErrorTitle>{t`An error occurred in your query`}</QueryErrorTitle>
-          </QueryErrorHeader>
-          <QueryErrorMessage>{processedError}</QueryErrorMessage>
-          <QueryErrorLink
-            href={MetabaseSettings.learnUrl("debugging-sql/sql-syntax")}
-          >
-            {t`Learn how to debug SQL errors`}
-          </QueryErrorLink>
+          <QueryErrorContent>
+            <QueryErrorHeader>
+              <QueryErrorIcon name="warning" />
+              <QueryErrorTitle>{t`An error occurred in your query`}</QueryErrorTitle>
+            </QueryErrorHeader>
+            <QueryErrorMessage>{processedError}</QueryErrorMessage>
+            <QueryErrorLink
+              href={MetabaseSettings.learnUrl("debugging-sql/sql-syntax")}
+            >
+              {t`Learn how to debug SQL errors`}
+            </QueryErrorLink>
+          </QueryErrorContent>
         </QueryError>
       );
     } else {

frontend/src/metabase/query_builder/components/VisualizationError.styled.tsx

@@ -5,17 +5,21 @@ import ExternalLink from "metabase/core/components/ExternalLink";
 import { monospaceFontFamily } from "metabase/styled-components/theme";
 
 export const QueryError = styled.div`
-  display: flex;
   overflow: auto;
+`;
+
+export const QueryErrorContent = styled.div`
+  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  min-height: 100%;
 `;
 
 export const QueryErrorHeader = styled.div`
   display: flex;
   align-items: center;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 `;
 
 export const QueryErrorTitle = styled.div`
@@ -44,15 +48,16 @@ export const QueryErrorMessage = styled.div`
   border: 1px solid ${color("brand")};
   border-radius: 0.5rem;
   background-color: ${color("bg-light")};
+  overflow-wrap: break-word;
 `;
 
 export const QueryErrorLink = styled(ExternalLink)`
   color: ${color("brand")};
+  margin: 1rem 0;
   font-size: 0.75rem;
   line-height: 1rem;
   font-weight: bold;
   text-decoration: none;
-  margin-top: 1.5rem;
 
   &:hover {
     text-decoration: underline;

frontend/src/metabase/query_builder/components/view/NativeCodePanel/NativeCodePanel.styled.tsx

@@ -27,7 +27,7 @@ export const CodeText = styled.code`
   font-size: 0.75rem;
   line-height: 1.125rem;
   white-space: pre;
-  word-break: break-all;
+  overflow-wrap: break-word;
 `;
 
 interface CodeCopyButtonProps {