♻️ refactor: text example responsive

USNightOwl · Oct 28, 2024 · 8687f62 · 8687f62
1 parent 93362ee
commit 8687f62
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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"