From 47d77e3894b9a6bb9c8a455f3f10f8d7fcbaa992 Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Sat, 4 Jul 2020 14:59:35 -0700
Subject: [PATCH] Fix mobile width issue when logo_subtitle is set

---
 hyperglass/ui/components/Title.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/hyperglass/ui/components/Title.js b/hyperglass/ui/components/Title.js
index 4c2bbc7..2dab795 100644
--- a/hyperglass/ui/components/Title.js
+++ b/hyperglass/ui/components/Title.js
@@ -27,8 +27,15 @@ const TitleOnly = ({ text, showSubtitle }) => (
 
 const SubtitleOnly = React.forwardRef(
   ({ text, mediaSize, size = "md", ...props }, ref) => (
-    <Heading ref={ref} as="h3" size={size} {...props}>
-      <Textfit mode="single" max={mediaSize === "sm" ? 13 : 25}>
+    <Heading
+      ref={ref}
+      as="h3"
+      size={size}
+      whiteSpace="break-spaces"
+      textAlign={["left", "left", "center", "center"]}
+      {...props}
+    >
+      <Textfit mode="multi" max={mediaSize === "sm" ? 13 : 25}>
         {text}
       </Textfit>
     </Heading>
@@ -113,6 +120,7 @@ const Title = React.forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
   const MatchedMode = modeMap[titleMode];
   return (
     <Button
+      w="100%"
       ref={ref}
       variant="link"
       onClick={onClick}