adding wrap to hints

csamuelsm · Dec 31, 2023 · 813e485 · 813e485
1 parent 00b794a
commit 813e485
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/src/lib/components/Hints.tsx b/src/lib/components/Hints.tsx
@@ -1,4 +1,4 @@
-import { Badge, Button, HStack, Text } from '@chakra-ui/react'
+import { Badge, Button, HStack, Text, Wrap, WrapItem } from '@chakra-ui/react'
 import React, { useEffect, useState } from 'react'
 
 type HintsProps = {
@@ -36,23 +36,27 @@ function Hints(props:HintsProps) {
   }, []);
 
   return (
-    <HStack gap={3} marginY={2}>
-        <Button colorScheme='purple' size='xs' isDisabled={!(hintNumber < 3) || loading} onClick={() => {
-            let currHintNumber = hintNumber;
-            setHintNumber(hintNumber+1);
-        }}>
-            Pedir dica ({hintNumber}/3)
-        </Button>
+    <Wrap gap={3} marginY={2} align='center'>
+        <WrapItem>
+            <Button colorScheme='purple' size='xs' isDisabled={!(hintNumber < 3) || loading} onClick={() => {
+                let currHintNumber = hintNumber;
+                setHintNumber(hintNumber+1);
+            }}>
+                Pedir dica ({hintNumber}/3)
+            </Button>
+        </WrapItem>
         {
             hints.map((el, idx) => {
                 return (
-                    <Badge fontSize='xs' fontWeight='bold' colorScheme='purple' display={
-                        hintNumber > idx ? 'block' : 'none'
-                    }>{idx + 1}. {el}</Badge>
+                    <WrapItem>
+                        <Badge fontSize='xs' fontWeight='bold' colorScheme='purple' display={
+                            hintNumber > idx ? 'block' : 'none'
+                        }>{idx + 1}. {el}</Badge>
+                    </WrapItem>
                 )
             })
         }
-    </HStack>
+    </Wrap>
   )
 }