fix title font-size when title is long

hyperglass/ui/components/Header.js

@@ -61,6 +61,8 @@ export default ({ height, isSubmitting, handleFormReset, ...props }) => {
             justifyContent="center"
             mb={[null, isSubmitting ? "auto" : null]}
             mt={[null, isSubmitting ? null : "auto"]}
+            maxW="100%"
+            flex="1 0 0"
         >
             <Title isSubmitting={isSubmitting} onClick={handleFormReset} />
         </AnimatedFlex>

hyperglass/ui/components/ResolvedTarget.js

@@ -3,6 +3,7 @@ import { Button, Icon, Spinner, Stack, Tag, Text, Tooltip, useColorMode } from "
 import useAxios from "axios-hooks";
 import format from "string-format";
 import useConfig from "~/components/HyperglassProvider";
+import useMedia from "~/components/MediaProvider";
 
 format.extend(String.prototype, {});
 
@@ -11,6 +12,7 @@ const labelBgSuccess = { dark: "success", light: "success" };
 
 const ResolvedTarget = React.forwardRef(({ fqdnTarget, setTarget, queryTarget }, ref) => {
     const { colorMode } = useColorMode();
+    const { mediaSize } = useMedia();
     const config = useConfig();
     const labelBgStatus = { true: labelBgSuccess[colorMode], false: labelBg[colorMode] };
     const dnsUrl = config.web.dns_provider.url;
@@ -56,11 +58,12 @@ const ResolvedTarget = React.forwardRef(({ fqdnTarget, setTarget, queryTarget },
             isInline
             w="100%"
             justifyContent={data4?.Answer && data6?.Answer ? "space-between" : "flex-end"}
+            flexWrap="wrap"
         >
             {loading4 ||
                 error4 ||
                 (findAnswer(data4) && (
-                    <Tag>
+                    <Tag my={2}>
                         <Tooltip
                             hasArrow
                             label={config.web.text.fqdn_tooltip.format({ protocol: "IPv4" })}
@@ -92,7 +95,7 @@ const ResolvedTarget = React.forwardRef(({ fqdnTarget, setTarget, queryTarget },
             {loading6 ||
                 error6 ||
                 (findAnswer(data6) && (
-                    <Tag>
+                    <Tag my={2}>
                         <Tooltip
                             hasArrow
                             label={config.web.text.fqdn_tooltip.format({ protocol: "IPv6" })}

hyperglass/ui/components/Title.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { Button, Heading, Image, Stack, useColorMode } from "@chakra-ui/core";
+import { Textfit } from "react-textfit";
 import { motion, AnimatePresence } from "framer-motion";
 import useConfig from "~/components/HyperglassProvider";
 import useMedia from "~/components/MediaProvider";
@@ -16,13 +17,15 @@ const titleMargin = { true: 2, false: 0 };
 
 const TitleOnly = ({ text, showSubtitle }) => (
     <Heading as="h1" mb={titleMargin[showSubtitle]} size={titleSize[showSubtitle]}>
-        {text}
+        <Textfit mode="single">{text}</Textfit>
     </Heading>
 );
 
 const SubtitleOnly = React.forwardRef(({ text, size = "md", ...props }, ref) => (
     <Heading ref={ref} as="h3" size={size} {...props}>
-        {text}
+        <Textfit mode="single" max={20}>
+            {text}
+        </Textfit>
     </Heading>
 ));
 
@@ -31,7 +34,7 @@ const AnimatedSubtitle = motion.custom(SubtitleOnly);
 const textAlignment = { false: ["right", "center"], true: ["left", "center"] };
 
 const TextOnly = ({ text, mediaSize, showSubtitle, ...props }) => (
-    <Stack spacing={2} textAlign={textAlignment[showSubtitle]} {...props}>
+    <Stack spacing={2} maxW="100%" textAlign={textAlignment[showSubtitle]} {...props}>
         <TitleOnly text={text.title} showSubtitle={showSubtitle} />
         <AnimatePresence>
             {showSubtitle && <AnimatedSubtitle text={text.subtitle} {...subtitleAnimation} />}
@@ -85,7 +88,7 @@ export default React.forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
             _hover={{ textDecoration: "none" }}
             justifyContent={btnJustify[isSubmitting]}
             px={0}
-            maxW={["90%", "90%", "25%", "25%"]}
+            maxW="100%"
             {...props}
         >
             <MatchedMode