Allow for WorkspaceItem to overflow its children as an exception (codesandbox#2190)

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/SandboxConfig/TemplateConfig.tsx

@@ -59,7 +59,7 @@ export const TemplateConfig = observer(() => {
   };
 
   return (
-    <WorkspaceItem defaultOpen title="Template">
+    <WorkspaceItem showOverflow defaultOpen title="Template">
       <Explanation style={{ marginTop: 0, marginBottom: '.5rem' }}>
         This is a template, you can find more info about templates
         <Link target="_blank" to={`/docs/templates`}>

packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem/index.tsx

@@ -17,6 +17,7 @@ type Props = {
   defaultOpen?: boolean;
   actions?: React.Component<any, any>;
   style?: React.CSSProperties;
+  showOverflow?: boolean;
 };
 
 type State = {
@@ -42,7 +43,15 @@ export default class WorkspaceItem extends React.Component<Props, State> {
   toggleOpen = () => this.setState({ open: !this.state.open });
 
   render() {
-    const { children, title, keepState, disabled, actions, style } = this.props;
+    const {
+      children,
+      title,
+      keepState,
+      disabled,
+      actions,
+      style,
+      showOverflow,
+    } = this.props;
     const { open } = this.state;
 
     return (
@@ -56,7 +65,7 @@ export default class WorkspaceItem extends React.Component<Props, State> {
         <ReactShow
           style={{
             height: 'auto',
-            overflow: 'hidden',
+            overflow: showOverflow ? 'initial' : 'hidden',
           }}
           transitionOnMount
           start={{