Chore/lifecycle tile layout (#10094)

Fixes a few lifecycle-related points:

- The layout for insights graphs now wraps when necessary
- Change the wording to be `X flags in <Stage>`
- Update the wording in the project health lifecycle boxes to match this
- Update the tooltips for the project health lifecycle to use new names
for stages instead of the old ones.

<img width="1145" alt="image"
src="https://github.com/user-attachments/assets/d1cfbf58-f79b-4751-b8b7-2ee7e31849ab"
/>

<img width="1075" alt="image"
src="https://github.com/user-attachments/assets/4a07b3ce-cf78-4009-82aa-1c276a2e9e5d"
/>

frontend/src/component/insights/sections/LifecycleInsights.tsx

@@ -55,8 +55,8 @@ const useChartColors = () => {
 
 const ChartRow = styled('div')(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'repeat(3, 1fr)',
     gap: theme.spacing(2),
+    gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))',
 }));
 
 const LifecycleTile = styled('article')(({ theme }) => ({
@@ -89,6 +89,10 @@ const HeaderNumber = styled('span')(({ theme }) => ({
     fontWeight: 'bold',
 }));
 
+const Capitalized = styled('span')({
+    textTransform: 'capitalize',
+});
+
 const Stats = styled('dl')(({ theme }) => ({
     background: theme.palette.background.elevation1,
     borderRadius: theme.shape.borderRadiusMedium,
@@ -159,14 +163,18 @@ export const LifecycleInsights: FC = () => {
                                         }}
                                     />
                                 </HeaderNumber>
-                                <span>Flags in {stage} stage</span>
+                                <span>
+                                    Flags in <Capitalized>{stage}</Capitalized>
+                                </span>
                             </TileHeader>
                             <div>
                                 <Chart data={data} stage={stage} />
                             </div>
                             <Stats>
                                 <StatRow>
-                                    <dt>Current median time spent in stage</dt>
+                                    <dt>
+                                        Median time for flags currently in stage
+                                    </dt>
                                     <dd data-loading-project-lifecycle-summary>
                                         {normalizeDays(
                                             data.averageTimeInStageDays,
@@ -175,7 +183,8 @@ export const LifecycleInsights: FC = () => {
                                 </StatRow>
                                 <StatRow>
                                     <dt>
-                                        Historical median time spent in stage
+                                        Historical median time for flags in
+                                        stage
                                     </dt>
                                     <dd data-loading-project-lifecycle-summary>
                                         {normalizeDays(

frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts

@@ -5,12 +5,12 @@ export const lifecycleMessages: Record<
     string
 > = {
     initial:
-        'Feature flags in the initial phase are flags that have not yet received metrics from any environments. This might mean that the flags have not been used yet, or it could indicate integration issues.',
+        'Feature flags in the Define stage are flags that have not yet received metrics from any environments. This might mean that the flags have not been used yet, or it could indicate integration issues.',
     preLive:
-        'In the pre-live phase, the feature is being developed and tested in controlled environments. Once the feature is ready, the flag can be enabled in production.',
+        'In the Develop stage, the feature is being developed and tested in controlled environments. Once the feature is ready, the flag can be enabled in production.',
     live: 'The feature is being rolled out in production according to its assigned strategies (targeting user segments and/or using percentage rollout).',
     completed:
-        'Flags that are in the completed phase still receive metrics in production. Consider archiving them to clean up your codebase to reduce technical debt.',
+        'Flags that are in the Cleanup stage still receive metrics in production. Consider archiving them to clean up your codebase to reduce technical debt.',
     archived:
         'Flags that have been archived and are no longer in use, but kept for future reference.',
 };

frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx

@@ -162,7 +162,7 @@ export const ProjectLifecycleSummary = () => {
         return (
             <StyledStageTitle>
                 {flagWord(stage)} in{' '}
-                {getFeatureLifecycleName(lifecycleStageName)} stage
+                {getFeatureLifecycleName(lifecycleStageName)}
             </StyledStageTitle>
         );
     };