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}>
+        <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

hyperglass/ui/package.json

@@ -29,6 +29,7 @@
         "react-markdown": "^4.3.1",
         "react-select": "^3.0.8",
         "react-string-replace": "^0.4.4",
+        "react-textfit": "^1.1.0",
         "string-format": "^2.0.0",
         "styled-system": "^5.1.5",
         "use-media": "^1.4.0",

hyperglass/ui/yarn.lock

@@ -6272,7 +6272,7 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-process@^0.11.10:
+process@^0.11.10, process@^0.11.9:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
@@ -6303,7 +6303,7 @@ prop-types-exact@1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6559,6 +6559,14 @@ react-string-replace@^0.4.4:
   dependencies:
     lodash "^4.17.4"
 
+react-textfit@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-textfit/-/react-textfit-1.1.0.tgz#088855580f2e7aad269efc81b734bf636877d0e1"
+  integrity sha512-iznFbj7fCizuo3Xof9iv57I8GZFiYp8vUFj+4qihHJZpzNwxWad7JZu7ALTAnwaiq/H0p60g8G4ifeEJYmfJuw==
+  dependencies:
+    process "^0.11.9"
+    prop-types "^15.5.10"
+
 react-transition-group@^2.2.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"