Simplify styling

Author: alan412

src/reactComponents/TabContent.tsx

@@ -31,6 +31,7 @@ import * as storageModule from '../storage/module';
 import * as storageProject from '../storage/project';
 import * as commonStorage from '../storage/common_storage';
 import { registerToolboxButton } from '../blocks/mrc_event_handler';
+import { Content } from 'antd/es/layout/layout';
 
 /** Default size for code panel. */
 const CODE_PANEL_DEFAULT_SIZE = '25%';
@@ -188,16 +189,16 @@ export const TabContent: React.FC<TabContentProps> = ({
   };
 
   return (
-    <div style={{ display: 'flex', height: '100%', visibility: isActive ? 'visible' : 'hidden', position: isActive ? 'relative' : 'absolute' }}>
-      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+    <div style={{ display: 'flex', minHeight: '100%', height: '100%' }}>
+      <Content style={{ flex: 1, minHeight: '100%' }}>
         <BlocklyComponent
           key={modulePath}
           modulePath={modulePath}
           onBlocklyComponentCreated={setupBlocklyComponent}
           theme={theme}
           onWorkspaceCreated={setupWorkspace}
         />
-      </div>
+      </Content>
       <div
         style={{
           width: typeof codePanelSize === 'string' ? codePanelSize : `${codePanelSize}px`,

src/reactComponents/Tabs.tsx

@@ -374,17 +374,12 @@ export function Component(props: TabsProps): React.JSX.Element {
 
   return (
     <>
-      <style>{`
-        .tabs-full-height .ant-tabs-content-holder {
-          flex: 1;
-          overflow: hidden;
-        }
-        
-        .tabs-full-height .ant-tabs-content {
+      <style>{`        
+        .ant-tabs-content {
           height: 100%;
         }
         
-        .tabs-full-height .ant-tabs-tabpane {
+        .ant-tabs-tabpane {
           height: 100%;
         }
       `}</style>
@@ -464,7 +459,6 @@ export function Component(props: TabsProps): React.JSX.Element {
         activeKey={activeKey}
         tabBarStyle={{ padding: 0, margin: 0, flex: '0 0 auto' }}
         style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-        className="tabs-full-height"
         hideAdd={false}
         items={createTabItems()}
       />