style fix word wrapping, and font sizes

macklinhrw · Nov 14, 2021 · c987111 · c987111 · vercel · Nov 14, 2021
1 parent abde90e
commit c987111
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/pages/poems/[slug].tsx b/src/pages/poems/[slug].tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/dist/client/router";
 import { useGetPoemBySlugQuery } from "../../generated/graphql";
 import { Navbar } from "../../components/Nav/Navbar";
-import { VStack, Box, Text } from "@chakra-ui/react"
+import { VStack, Box, Text, Flex } from "@chakra-ui/react"
 
 const PoemsPage = () => {
   const router = useRouter();
@@ -20,14 +20,14 @@ const PoemsPage = () => {
   return (
     <>
       <Navbar />
-      <Box mx="auto" w="max">
+      <Box mx="auto" w="max" maxW="100%">
         {data?.getPoemBySlug && (
           <VStack mt="10">
             <Text as="h1" fontSize={{ base: "xl", lg: "2xl" }} fontWeight="bold" fontFamily="serif">{data.getPoemBySlug.title}</Text>
-            <Text>
+            <Text wordBreak="break-word">
               {data.getPoemBySlug.content.split("\n").map((line) => {
                 return (
-                  <Text textAlign="center" fontSize={{ base: "lg", lg: "xl" }} fontFamily="serif">{line}</Text>
+                  <Text wordBreak="break-word" textAlign="center" fontSize={{ sm: "md", md: "lg", lg: "xl" }} fontFamily="serif">{line}</Text>
                 )
               })}
             </Text>