fix component tree overflow style

packages/editor/src/components/StructureTree/ComponentItemView.tsx

@@ -1,4 +1,10 @@
-import { ArrowDownIcon, ArrowUpIcon, ChevronDownIcon, ChevronRightIcon, DeleteIcon } from '@chakra-ui/icons';
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  DeleteIcon,
+} from '@chakra-ui/icons';
 import { Box, HStack, IconButton, Text } from '@chakra-ui/react';
 import { useState } from 'react';
 
@@ -28,7 +34,7 @@ export const ComponentItemView: React.FC<Props> = props => {
     isDroppable,
     isSortable = false,
     onMoveUp,
-    onMoveDown
+    onMoveDown,
   } = props;
 
   const [isDragOver, setIsDragOver] = useState(false);
@@ -63,23 +69,28 @@ export const ComponentItemView: React.FC<Props> = props => {
     >
       {noChevron ? null : expandIcon}
       <HStack width="full" justify="space-between">
-        <Text color={isSelected ? 'red.500' : 'black'} onClick={onClick} cursor="pointer">
+        <Text
+          color={isSelected ? 'red.500' : 'black'}
+          onClick={onClick}
+          cursor="pointer"
+          overflow="hidden"
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
+        >
           {title}
         </Text>
-        <Box display="flex" alignItems="center">
+        <HStack spacing="1">
           {onClickRemove ? (
-            <Box>
-              <IconButton
-                variant="ghost"
-                size="smx"
-                aria-label="remove"
-                icon={<DeleteIcon />}
-                onClick={onClickRemove}
-              />
-            </Box>
+            <IconButton
+              variant="ghost"
+              size="smx"
+              aria-label="remove"
+              icon={<DeleteIcon />}
+              onClick={onClickRemove}
+            />
           ) : null}
           {isSortable ? (
-            <Box>
+            <>
               <IconButton
                 variant="ghost"
                 size="smx"
@@ -94,9 +105,9 @@ export const ComponentItemView: React.FC<Props> = props => {
                 icon={<ArrowDownIcon />}
                 onClick={onMoveDown}
               />
-            </Box>
+            </>
           ) : null}
-        </Box>
+        </HStack>
       </HStack>
     </Box>
   );

packages/editor/src/components/StructureTree/ComponentTree.tsx

@@ -66,7 +66,7 @@ export const ComponentTree: React.FC<Props> = props => {
       );
 
       return (
-        <Box key={slot} paddingLeft="5" width="full">
+        <Box key={slot} paddingLeft="3" width="full">
           {/* although component can have multiple slots, but for now, most components have only one slot
           so we hide slot name to save more view area */}
           {slots.length > 1 ? slotName : null}