add wrapper on glossary tooltip to avoid text wrapping in a new line when tooltip is displayed

Author: pettinarip

src/components/Glossary/GlossaryTooltip/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import { Text, useBreakpointValue } from "@chakra-ui/react"
+import { Box, Text, useBreakpointValue } from "@chakra-ui/react"
 
 import GlossaryDefinition from "@/components/Glossary/GlossaryDefinition"
 import Tooltip from "@/components/Tooltip"
@@ -13,28 +13,30 @@ const GlossaryTooltip = ({ children, termKey }: GlossaryTooltipProps) => {
   const isLargeScreen = useBreakpointValue({ base: false, lg: true })
 
   return isLargeScreen ? (
-    <Tooltip
-      content={
-        <GlossaryDefinition
-          term={termKey}
-          size="sm"
-          options={{ ns: "glossary-tooltip" }}
-        />
-      }
-    >
-      <Text
-        as="u"
-        textDecorationStyle="dotted"
-        textUnderlineOffset="3px"
-        _hover={{
-          textDecorationColor: "primary.hover",
-          color: "primary.hover",
-        }}
-        cursor="help"
+    <Box display="inline-block">
+      <Tooltip
+        content={
+          <GlossaryDefinition
+            term={termKey}
+            size="sm"
+            options={{ ns: "glossary-tooltip" }}
+          />
+        }
       >
-        {children}
-      </Text>
-    </Tooltip>
+        <Text
+          as="u"
+          textDecorationStyle="dotted"
+          textUnderlineOffset="3px"
+          _hover={{
+            textDecorationColor: "primary.hover",
+            color: "primary.hover",
+          }}
+          cursor="help"
+        >
+          {children}
+        </Text>
+      </Tooltip>
+    </Box>
   ) : (
     <Text as="span">{children}</Text>
   )