fix(sqllab): tab layout truncated (#32005)

superset-frontend/packages/superset-ui-core/src/style/index.tsx

@@ -27,6 +27,7 @@ export {
   ThemeProvider,
   CacheProvider as EmotionCacheProvider,
   withTheme,
+  type SerializedStyles,
 } from '@emotion/react';
 export { default as createEmotionCache } from '@emotion/cache';
 

superset-frontend/src/components/ErrorBoundary/index.tsx

@@ -24,6 +24,7 @@ export interface ErrorBoundaryProps {
   children: ReactNode;
   onError?: (error: Error, info: ErrorInfo) => void;
   showMessage?: boolean;
+  className?: string;
 }
 
 interface ErrorBoundaryState {
@@ -51,14 +52,16 @@ export default class ErrorBoundary extends Component<
 
   render() {
     const { error, info } = this.state;
+    const { showMessage, className } = this.props;
     if (error) {
       const firstLine = error.toString().split('\n')[0];
-      if (this.props.showMessage) {
+      if (showMessage) {
         return (
           <ErrorAlert
             errorType={t('Unexpected error')}
             message={firstLine}
             descriptionDetails={info?.componentStack}
+            className={className}
           />
         );
       }

superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx

@@ -35,6 +35,7 @@ export interface ErrorAlertProps {
   children?: React.ReactNode; // Additional content to show in the modal
   closable?: boolean; // Show close button, default true
   showIcon?: boolean; // Show icon, default true
+  className?: string;
 }
 
 const ErrorAlert: React.FC<ErrorAlertProps> = ({
@@ -49,6 +50,7 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
   children,
   closable = true,
   showIcon = true,
+  className,
 }) => {
   const [isDescriptionVisible, setIsDescriptionVisible] = useState(
     !descriptionDetailsCollapsed,
@@ -66,7 +68,7 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
     const color =
       type === 'warning' ? theme.colors.warning.base : theme.colors.error.base;
     return (
-      <div style={{ cursor: 'pointer' }}>
+      <div className={className} style={{ cursor: 'pointer' }}>
         <span style={{ color }}>{icon} </span>
         {errorType}
       </div>
@@ -100,13 +102,13 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
       )}
     </div>
   );
-
   const renderAlert = (closable: boolean) => (
     <Alert
       description={renderDescription()}
       type={type}
       showIcon
       closable={closable}
+      className={className}
     >
       <strong>{errorType}</strong>
       {message && (

superset-frontend/src/views/App.tsx

@@ -25,6 +25,7 @@ import {
   useLocation,
 } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
+import { css } from '@superset-ui/core';
 import { GlobalStyles } from 'src/GlobalStyles';
 import ErrorBoundary from 'src/components/ErrorBoundary';
 import Loading from 'src/components/Loading';
@@ -83,12 +84,19 @@ const App = () => (
         {routes.map(({ path, Component, props = {}, Fallback = Loading }) => (
           <Route path={path} key={path}>
             <Suspense fallback={<Fallback />}>
-              <Layout.Content>
+              <Layout.Content
-                <div style={{ padding: '16px' }}>
+                css={css`
-                  <ErrorBoundary>
+                  display: flex;
-                    <Component user={bootstrapData.user} {...props} />
+                  flex-direction: column;
-                  </ErrorBoundary>
+                `}
-                </div>
+              >
+                <ErrorBoundary
+                  css={css`
+                    margin: 16px;
+                  `}
+                >
+                  <Component user={bootstrapData.user} {...props} />
+                </ErrorBoundary>
               </Layout.Content>
             </Suspense>
           </Route>