When hovering over the Sidebar, the text is displayed with a bend - css

Question

I'm using chakra ui.
Hovering over the Sidebar expands the sidebar to the right.
The text is bent on the way to the right.
Is there any way to widen the　Sidebar without bending the letters?
If anyone can help me understand, I would appreciate your help.
code
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "44px"}
zIndex={10}
transition={"all .2s ease"}
>
<Box transition="all 0.3s">
<HStack p={3}>
<Flex alignItems="center">
<Image
display={state ? "none" : "inline-block"}
height="24px"
src={""}
transition="all 0.3s ease-in-out"
/>
<Image
display={state ? "inline-block" : "none"}
src={"chakra_logo.png"}
/>
</Flex>
<Text display={state ? "inline-block" : "none"} fontSize="xs">
logo
</Text>
</HStack>
<VStack mt={3} spacing={0}>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<BiSearchAlt />
<Text display={state ? "inline-block" : "none"}>
search Page
</Text>
</HStack>
</a>
</Link>
</Box>
</VStack>
</Box>
<VStack mb={2} spacing={0}>
<Box mb={2} px={3} width="full">
<Divider borderColor="gray.300" />
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} p={3} width="full">
<HStack>
<Image src={""} width="24px" />
<Text display={state ? "inline-block" : "none"}>
My Page Setting
</Text>
</HStack>
</Box>
</VStack>
</Flex>

Answer 1

To prevent text from wrapping, you can add whiteSpace="nowrap" and overflow="hidden" props to the <Text /> elements.