From 2ae9589e6750d1396e9648bcb73295ca170963c3 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 10 Oct 2024 09:22:26 +0200
Subject: [PATCH] chore: move flag activity info to the left (#8411)

Shifts the display of the activity info to the left instead of cramming
it in next to metrics selectors.

![image](https://github.com/user-attachments/assets/baaafd02-c0d8-40ec-92a0-9b22e7d377d8)
---
 .../personalDashboard/FlagMetricsChart.tsx    | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
index 3e2b98eac9..fa213ee548 100644
--- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
+++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -141,11 +141,10 @@ const EnvironmentSelect: FC<{
     );
 };
 
-const ExposureAndSelectors = styled(Box)(({ theme }) => ({
+const MetricsSelectors = styled(Box)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'flex-end',
     gap: theme.spacing(2),
-    width: '100%',
 }));
 
 const ChartContainer = styled('div')(({ theme }) => ({
@@ -157,6 +156,14 @@ const ChartContainer = styled('div')(({ theme }) => ({
 
 const StyledExposure = styled(FlagExposure)({
     alignItems: 'center',
+    justifySelf: 'start',
+});
+
+const ExposureAndMetricsRow = styled('div')({
+    display: 'flex',
+    flexFlow: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
 });
 
 export const FlagMetricsChart: FC<{
@@ -174,24 +181,26 @@ export const FlagMetricsChart: FC<{
 
     return (
         <ChartContainer>
-            <ExposureAndSelectors>
+            <ExposureAndMetricsRow>
                 <StyledExposure
                     project={flag.project}
                     flagName={flag.name}
                     onArchive={onArchive}
                 />
-                {environment ? (
-                    <EnvironmentSelect
-                        environment={environment}
-                        setEnvironment={setEnvironment}
-                        activeEnvironments={activeEnvironments}
+                <MetricsSelectors>
+                    {environment ? (
+                        <EnvironmentSelect
+                            environment={environment}
+                            setEnvironment={setEnvironment}
+                            activeEnvironments={activeEnvironments}
+                        />
+                    ) : null}
+                    <FeatureMetricsHours
+                        hoursBack={hoursBack}
+                        setHoursBack={setHoursBack}
                     />
-                ) : null}
-                <FeatureMetricsHours
-                    hoursBack={hoursBack}
-                    setHoursBack={setHoursBack}
-                />
-            </ExposureAndSelectors>
+                </MetricsSelectors>
+            </ExposureAndMetricsRow>
 
             {noData ? (
                 <PlaceholderFlagMetricsChart />