Show cost tooltip on mobile, modify styles (#23)

* Show tooltip on mobile, modify styles

* Tokens -> Token Usage

src/components/tooltip/CostTooltip.tsx

@@ -19,26 +19,28 @@ export const CostTooltip = ({
       borderRadius="8"
       color="gray.800"
       bgColor="gray.50"
+      borderWidth={1}
       py={2}
       hasArrow
+      shouldWrapChildren
       label={
-        <VStack fontSize="sm" w="200">
-          <VStack>
+        <VStack fontSize="sm" w="200" spacing={4}>
+          <VStack spacing={0}>
             <Text fontWeight="bold">Cost</Text>
             <HStack spacing={0}>
               <Icon as={BsCurrencyDollar} />
               <Text>{cost.toFixed(6)}</Text>
             </HStack>
           </VStack>
-          <VStack>
-            <Text fontWeight="bold">Tokens</Text>
+          <VStack spacing={1}>
+            <Text fontWeight="bold">Token Usage</Text>
             <HStack>
-              <VStack w="28">
+              <VStack w="28" spacing={1}>
                 <Text>Prompt</Text>
                 <Text>{promptTokens ?? 0}</Text>
               </VStack>
-              <Divider borderColor="gray.200" h={12} orientation="vertical" />
-              <VStack w="28">
+              <Divider borderColor="gray.200" h={8} orientation="vertical" />
+              <VStack w="28" spacing={1}>
                 <Text whiteSpace="nowrap">Completion</Text>
                 <Text>{completionTokens ?? 0}</Text>
               </VStack>