diff --git a/packages/editor/src/components/Editor.tsx b/packages/editor/src/components/Editor.tsx
index d606a10d..625d33b4 100644
--- a/packages/editor/src/components/Editor.tsx
+++ b/packages/editor/src/components/Editor.tsx
@@ -114,10 +114,7 @@ export const Editor: React.FC<Props> = observer(
     const appComponent = useMemo(() => {
       return isDisplayApp ? (
         <ErrorBoundary>
-          <App
-            options={app}
-            gridCallbacks={gridCallbacks}
-          />
+          <App options={app} gridCallbacks={gridCallbacks} />
         </ErrorBoundary>
       ) : null;
     }, [App, app, gridCallbacks, isDisplayApp]);
@@ -198,7 +195,7 @@ export const Editor: React.FC<Props> = observer(
                 display="flex"
                 flexDirection="column"
                 textAlign="left"
-                lazyBehavior='keepMounted'
+                lazyBehavior="keepMounted"
                 isLazy
                 index={explorerMenuTab}
                 onChange={activatedTab => {
@@ -211,11 +208,11 @@ export const Editor: React.FC<Props> = observer(
                   <Tab>Data</Tab>
                   <Tab>State</Tab>
                 </TabList>
-                <TabPanels flex="1" overflow="auto">
-                  <TabPanel p={0}>
+                <TabPanels overflow='hidden' height="full" flex="1">
+                  <TabPanel height="full" overflow="auto" p={0}>
                     <Explorer services={services} />
                   </TabPanel>
-                  <TabPanel p={0}>
+                  <TabPanel height="full" overflow="auto" p={0}>
                     <StructureTree
                       components={components}
                       selectedComponentId={selectedComponentId}
@@ -225,10 +222,10 @@ export const Editor: React.FC<Props> = observer(
                       services={services}
                     />
                   </TabPanel>
-                  <TabPanel p={0}>
+                  <TabPanel height="full" overflow="auto" p={0}>
                     <DataSource active={activeDataSource?.id ?? ''} services={services} />
                   </TabPanel>
-                  <TabPanel p={0} height="100%">
+                  <TabPanel overflow="auto" p={0} height="100%">
                     <StateViewer store={stateStore} />
                   </TabPanel>
                 </TabPanels>
diff --git a/packages/editor/src/components/StructureTree/StructureTree.tsx b/packages/editor/src/components/StructureTree/StructureTree.tsx
index 5f95160b..616d5be0 100644
--- a/packages/editor/src/components/StructureTree/StructureTree.tsx
+++ b/packages/editor/src/components/StructureTree/StructureTree.tsx
@@ -51,11 +51,14 @@ export const StructureTree: React.FC<Props> = props => {
   useEffect(() => {
     wrapperRef.current
       ?.querySelector(`#tree-item-${selectedComponentId}`)
-      ?.scrollIntoView();
+      ?.scrollIntoView({
+        behavior:'smooth',
+        block:'center'
+      });
   }, [selectedComponentId]);
 
   return (
-    <VStack ref={wrapperRef} spacing="2" padding="4" alignItems="start" overflow="auto">
+    <VStack ref={wrapperRef} height='full' spacing="2" padding="4" alignItems="start" overflowWrap='break-word' overflowX='hidden' overflowY="auto">
       <Text fontSize="lg" fontWeight="bold" mb="0.5rem">
         Components
       </Text>