diff --git a/hyperglass/ui/components/Header.js b/hyperglass/ui/components/Header.js index 93a5fec..64215c3 100644 --- a/hyperglass/ui/components/Header.js +++ b/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" > </AnimatedFlex> diff --git a/hyperglass/ui/components/ResolvedTarget.js b/hyperglass/ui/components/ResolvedTarget.js index ac94817..82fb16c 100644 --- a/hyperglass/ui/components/ResolvedTarget.js +++ b/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" })} diff --git a/hyperglass/ui/components/Title.js b/hyperglass/ui/components/Title.js index 7837b89..bc38a30 100644 --- a/hyperglass/ui/components/Title.js +++ b/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 diff --git a/hyperglass/ui/package.json b/hyperglass/ui/package.json index 8014e5c..cb4078c 100644 --- a/hyperglass/ui/package.json +++ b/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", diff --git a/hyperglass/ui/yarn.lock b/hyperglass/ui/yarn.lock index 21dadd0..bee9df1 100644 --- a/hyperglass/ui/yarn.lock +++ b/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"