From 8687f621f28926972d00f698b0444d4175a9760a Mon Sep 17 00:00:00 2001
From: 21120447 <haonhat2729@gmail.com>
Date: Mon, 28 Oct 2024 15:34:35 +0700
Subject: [PATCH] :recycle: refactor: text example responsive

---
 src/components/word-result/WordResult.tsx | 16 ++++++++--------
 src/layout/Layout.tsx                     |  2 +-
 src/layout/SideBar.tsx                    |  3 ++-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/word-result/WordResult.tsx b/src/components/word-result/WordResult.tsx
index 671075c..8fcbb57 100644
--- a/src/components/word-result/WordResult.tsx
+++ b/src/components/word-result/WordResult.tsx
@@ -32,22 +32,22 @@ const WordResult = ({ wordFound, wordNotFound }: Props) => {
               ))}
           </VStack>
           {wordFound.map((wordFound, index) => (
-            <VStack key={index} gap={"32px"} alignItems="flex-start" marginTop={"20px"} w={"full"}>
+            <VStack key={index} gap={"32px"} alignItems="flex-start" marginTop={"20px"} w="full">
               {wordFound.meanings.map((meaning, index) => (
                 <VStack key={`meaning${index}`} gap={"16px"} alignItems="flex-start" w={"full"}>
-                  <Heading size="lg" color={"blue.900"} flexWrap={"nowrap"} className="text-nowrap" w={"full"}>
+                  <Heading size="lg" color={"blue.900"} flexWrap={"nowrap"} className="text-nowrap" w="full">
                     {meaning.partOfSpeech}
                   </Heading>
                   {meaning.definitions.map((definition, index) => (
-                    <Box key={`definition${index}`} gap={"16px"} w={"full"}>
-                      <Text w={"full"}>{definition.definition}</Text>
+                    <Box key={`definition${index}`} gap={"16px"}>
+                      <Text w="full">{definition.definition}</Text>
                       {definition.example && (
-                        <HStack alignItems={"flex-start"}>
-                          <Text fontWeight="bold" color="blue.900" flexWrap={"nowrap"} className="text-nowrap">
+                        <div className="flex items-start flex-wrap">
+                          <Text fontWeight="bold" color="blue.900" flexWrap={"nowrap"}>
                             Example:
                           </Text>
-                          <Text>{definition.example}</Text>
-                        </HStack>
+                          <Text w="full">{definition.example}</Text>
+                        </div>
                       )}
                     </Box>
                   ))}
diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
index 991e01b..7c899ff 100644
--- a/src/layout/Layout.tsx
+++ b/src/layout/Layout.tsx
@@ -14,7 +14,7 @@ const Layout = () => {
   return (
     <>
       <AppBar toggleSidebar={toggleSidebar} />
-      <HStack position="relative" align="flex-start">
+      <HStack position="relative" align="flex-start" gap={"0px"}>
         <SideBar isOpen={isSidebarOpen} />
         <main style={{ flex: 1, transition: "margin-left 0.3s", marginTop: "64px", padding: "10px" }} id="content">
           <Outlet />
diff --git a/src/layout/SideBar.tsx b/src/layout/SideBar.tsx
index 2bbf6eb..2c187ac 100644
--- a/src/layout/SideBar.tsx
+++ b/src/layout/SideBar.tsx
@@ -99,7 +99,8 @@ const SideBar = ({ isOpen }: Props) => {
   return (
     <VStack
       position="sticky"
-      width={(isOpen || isHovered) && !isMobile ? "260px" : "60px"}
+      minW={(isOpen || isHovered) && !isMobile ? "260px" : "60px"}
+      maxW={(isOpen || isHovered) && !isMobile ? "260px" : "60px"}
       height="100dvh"
       borderRight="1px"
       align="flex-start"