From 51b2f5bb5abbcf40544e6adba3ac34cc2cd5c1bb Mon Sep 17 00:00:00 2001
From: Darin Kelkhoff <darin.kelkhoff@gmail.com>
Date: Thu, 2 Nov 2023 19:56:55 -0500
Subject: [PATCH] CE-604 Better wrapping (flex-wrap!)

---
 .../components/widgets/components/ChartSubheaderWithData.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/qqq/components/widgets/components/ChartSubheaderWithData.tsx b/src/qqq/components/widgets/components/ChartSubheaderWithData.tsx
index 1fa1c87..2815833 100644
--- a/src/qqq/components/widgets/components/ChartSubheaderWithData.tsx
+++ b/src/qqq/components/widgets/components/ChartSubheaderWithData.tsx
@@ -70,6 +70,7 @@ function StackedBarChart({chartSubheaderData}: Props): JSX.Element
    {
       mainNumberElement = <Link to={chartSubheaderData.mainNumberUrl}>{mainNumberElement}</Link>
    }
+   mainNumberElement = <Box pr={1}>{mainNumberElement}</Box>
 
    let previousNumberElement = (
       <>
@@ -86,11 +87,11 @@ function StackedBarChart({chartSubheaderData}: Props): JSX.Element
    }
 
    return chartSubheaderData ? (
-      <Box display="inline-flex" alignItems="flex-end">
+      <Box display="inline-flex" alignItems="flex-end" flexWrap="wrap">
          {mainNumberElement}
          {
             chartSubheaderData.vsPreviousPercent != null && iconName != null && (
-               <Box display="inline-flex" alignItems="flex-end" pb={1} pl={0.5}>
+               <Box display="inline-flex" alignItems="flex-end" pb={1} ml={-0.5}>
                   <Icon fontSize="medium" sx={{color: color}}>{iconName}</Icon>
                   <Typography display="inline" variant="body2" sx={{color: color}}>{chartSubheaderData.vsPreviousPercent}%</Typography>
                   {previousNumberElement}