fix: handle narrow screens better (#8430)

This PR improves handling of narrow screens. It:
- makes the owner/roles row wrap when it needs to
- makes the lifecycle + metric selectors wrap when necessary
- makes the text for the empty chart wrap (and makes it text, not label)

frontend/src/component/personalDashboard/FlagMetricsChart.tsx

@@ -11,7 +11,7 @@ import annotationPlugin from 'chartjs-plugin-annotation';
 import { Bar } from 'react-chartjs-2';
 import useTheme from '@mui/material/styles/useTheme';
 import { type FC, useEffect, useMemo, useState } from 'react';
-import { Box, type Theme, styled } from '@mui/material';
+import { Box, type Theme, styled, Typography } from '@mui/material';
 import { FeatureMetricsHours } from '../feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours';
 import GeneralSelect from '../common/GeneralSelect/GeneralSelect';
 import { useFeatureMetricsRaw } from 'hooks/api/getters/useFeatureMetricsRaw/useFeatureMetricsRaw';
@@ -27,16 +27,14 @@ import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/Feat
 
 const defaultYes = [0, 14, 28, 21, 33, 31, 31, 22, 26, 37, 31, 14, 21, 14, 0];
 
-const placeholderData = (theme: Theme, label?: string) => ({
+const placeholderData = (theme: Theme) => ({
     labels: Array.from({ length: 15 }, (_, i) => i + 1),
     datasets: [
         {
             data: defaultYes,
             backgroundColor: theme.palette.divider,
             hoverBackgroundColor: theme.palette.divider,
-            label:
+            label: '',
-                label ||
-                'No metrics for this feature flag in the selected environment and time period',
         },
     ],
 });
@@ -46,7 +44,7 @@ const ChartWrapper = styled('div')({
     flexGrow: 1,
 });
 
-export const PlaceholderFlagMetricsChart: React.FC<{ label?: string }> = ({
+const PlaceholderFlagMetricsChart: React.FC<{ label: string }> = ({
     label,
 }) => {
     const theme = useTheme();
@@ -56,21 +54,22 @@ export const PlaceholderFlagMetricsChart: React.FC<{ label?: string }> = ({
     }, [theme]);
 
     const data = useMemo(() => {
-        return placeholderData(theme, label);
+        return placeholderData(theme);
     }, [theme]);
 
+    const labelId = 'placeholder-chart-label';
+
     return (
+        <>
+            <Typography id={labelId}>{label}</Typography>
             <ChartWrapper>
-            <Bar
+                <Bar data={data} options={options} aria-describedby={labelId} />
-                data={data}
-                options={options}
-                aria-label='A placeholder bar chart with a single feature flag exposure metrics'
-            />
             </ChartWrapper>
+        </>
     );
 };
 
-export const EmptyFlagMetricsChart = () => {
+const EmptyFlagMetricsChart = () => {
     const theme = useTheme();
 
     const options = useMemo(() => {
@@ -177,7 +176,8 @@ const EnvironmentSelect: FC<{
 
 const MetricsSelectors = styled(Box)(({ theme }) => ({
     display: 'flex',
-    justifyContent: 'flex-end',
+    justifyContent: 'flex-start',
+    flexFlow: 'row wrap',
     gap: theme.spacing(2),
 }));
 
@@ -195,12 +195,23 @@ const StyledExposure = styled(FlagExposure)({
     justifySelf: 'start',
 });
 
-const ExposureAndMetricsRow = styled('div')({
+const ExposureAndMetricsRow = styled('div')(({ theme }) => ({
     display: 'flex',
-    flexFlow: 'row',
     justifyContent: 'space-between',
+    flexFlow: 'row wrap',
     width: '100%',
-});
+    gap: theme.spacing(1),
+}));
+
+export const PlaceholderFlagMetricsChartWithWrapper: React.FC<{
+    label: string;
+}> = (props) => {
+    return (
+        <ChartContainer>
+            <PlaceholderFlagMetricsChart {...props} />
+        </ChartContainer>
+    );
+};
 
 export const FlagMetricsChart: FC<{
     flag: { name: string; project: string };
@@ -245,7 +256,7 @@ export const FlagMetricsChart: FC<{
             {loading ? (
                 <EmptyFlagMetricsChart />
             ) : noData ? (
-                <PlaceholderFlagMetricsChart />
+                <PlaceholderFlagMetricsChart label='No metrics for this feature flag in the selected environment and time period' />
             ) : (
                 <ChartWrapper>
                     <Bar

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -469,6 +469,6 @@ const FlagMetricsChart = React.lazy(() =>
 );
 const PlaceholderFlagMetricsChart = React.lazy(() =>
     import('./FlagMetricsChart').then((module) => ({
-        default: module.PlaceholderFlagMetricsChart,
+        default: module.PlaceholderFlagMetricsChartWithWrapper,
     })),
 );

frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx

@@ -12,7 +12,7 @@ type Props = {
 const Wrapper = styled('div')(({ theme }) => ({
     width: '100%',
     display: 'flex',
-    flexDirection: 'row',
+    flexFlow: 'row wrap',
     gap: theme.spacing(1),
     justifyContent: 'space-between',
 }));